Tag group: Critères appliqués

Choix de l'univers FT

Tag group Liste d'étiquettes

Elle regroupe des tags ensemble et permet par exemple d’afficher une liste de critères appliqués.

Documentation : Figma

Langage:  HTML 

<div class="ds-tag-group">
    <p class="ds-tag-group-label" id="applied-criteria">Critères appliqués&nbsp;:</p>

    <ul class="ds-tag-group-items" aria-labelledby="applied-criteria">
        <li>
            <span class="tag tag-tertiary light"><span class="tag-content">Lorem ipsum 1</span><button class="tag-append tag-button" data-ft-tooltip="Supprimer" data-ft-vocalize="false" type="button">
                    <span class="sr-only">Supprimer&nbsp;Lorem ipsum 1</span>
                    <span aria-hidden="true" class="icon icon-close"></span>
                </button>
            </span>
        </li>
        <li>
            <span class="tag tag-tertiary light"><span class="tag-content">Lorem ipsum 2</span><button class="tag-append tag-button" data-ft-tooltip="Supprimer" data-ft-vocalize="false" type="button">
                    <span class="sr-only">Supprimer&nbsp;Lorem ipsum 2</span>
                    <span aria-hidden="true" class="icon icon-close"></span>
                </button>
            </span>
        </li>
        <li>
            <span class="tag tag-tertiary light"><span class="tag-content">Lorem ipsum 3</span><button class="tag-append tag-button" data-ft-tooltip="Supprimer" data-ft-vocalize="false" type="button">
                    <span class="sr-only">Supprimer&nbsp;Lorem ipsum 3</span>
                    <span aria-hidden="true" class="icon icon-close"></span>
                </button>
            </span>
        </li>
        <li>
            <span class="tag tag-tertiary light"><span class="tag-content">Lorem ipsum 4</span><button class="tag-append tag-button" data-ft-tooltip="Supprimer" data-ft-vocalize="false" type="button">
                    <span class="sr-only">Supprimer&nbsp;Lorem ipsum 4</span>
                    <span aria-hidden="true" class="icon icon-close"></span>
                </button>
            </span>
        </li>
        <li hidden>
            <span class="tag tag-tertiary light"><span class="tag-content">Lorem ipsum 5</span><button class="tag-append tag-button" data-ft-tooltip="Supprimer" data-ft-vocalize="false" type="button">
                    <span class="sr-only">Supprimer&nbsp;Lorem ipsum 5</span>
                    <span aria-hidden="true" class="icon icon-close"></span>
                </button>
            </span>
        </li>
        <li hidden>
            <span class="tag tag-tertiary light"><span class="tag-content">Lorem ipsum 6</span><button class="tag-append tag-button" data-ft-tooltip="Supprimer" data-ft-vocalize="false" type="button">
                    <span class="sr-only">Supprimer&nbsp;Lorem ipsum 6</span>
                    <span aria-hidden="true" class="icon icon-close"></span>
                </button>
            </span>
        </li>

    </ul>

    <button class="btn btn-tertiary light btn-sm" id="button_314834327" type="button" data-ft-tooltip="Afficher les 2 critères supplémentaires">
        <span class="btn-content">+2</span>
    </button>

    <button class="btn btn-reset btn-link" id="button_146855349" type="button">
        <span class="btn-content">Supprimer les critères</span>
    </button>
</div>
  • URL Preview : /js/tag-group.js
  • Chemin d'accès : public/js/tag-group.js
  • Taille : 604 Bytes
  • Contenu : 
    window.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll(".ds-tag-group .btn-sm").forEach((moreTagButton) => {
        moreTagButton.addEventListener("click", () => {
            moreTagButton.toggleAttribute("hidden");

            const moreTags = moreTagButton.closest(".ds-tag-group").querySelectorAll("li[hidden]");

            moreTags.forEach((tag) => {
                tag.toggleAttribute("hidden");
            })

            if (moreTags[0]) {
                moreTags[0].tabIndex = -1;
                moreTags[0].focus();
            }
        })
    });
});