Etat Pur Design System

Template Dropdown 

<div class="dropdown" :class="show ? 'dropdown-show' : ''" x-data="{show: false}" role="combobox" :aria-expanded="show" aria-controls="dropdown-menu" aria-haspopup="listbox" aria-label="Label text">
        <button type="button" x-ref="dropdownButton" @click="show = !show" aria-haspopup="true" aria-expanded="false" :aria-expanded="show" class=" btn    btn-size-lg">
            Label text

            <span class="dropdown-chevron ml-auto" aria-hidden="true">
                <span class="flex transition-transform" :class="show ? 'rotate-180' : ''">
                    <svg class=" shrink-0" width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                    </svg> </span>
            </span>

        </button>

        <div class="dropdown-content" x-show="show" :aria-expanded="show" x-anchor.bottom-start.offset.0="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
            <!-- Button item -->
            <button type="button" class="dropdown-item ">
                Item text
            </button>
            <!-- Link item -->
            <a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
                Link item text
            </a>
            <!-- Button item -->
            <button type="button" class="dropdown-item ">
                Item text
            </button>
            <!-- Button item -->
            <button type="button" class="dropdown-item ">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Item with icon
            </button>
        </div>

    </div>
 
{% extends "@template-button" %}

{% set button_attribute = 'x-ref="dropdownButton"
                         @click="show = !show"
                         aria-haspopup="true"
                         aria-expanded="false"
                         :aria-expanded="show"' %}

{% set button_class = button_class %}

{% block trailing_icon %}
    <span class="dropdown-chevron ml-auto" aria-hidden="true">
        <span class="flex transition-transform" :class="show ? 'rotate-180' : ''">
            {% render "@icons-heroicons--chevron-down-mini" with {
                width: 16,
                height: 16
            } %}
        </span>
    </span>
{% endblock %}

{% block button %}
    <div class="dropdown"
         :class="show ? 'dropdown-show' : ''"
            {% if(isFixedMobile) %}
                :class="$store.screen.isMobile ? 'dropdown-fixed' : ''"
            {% endif %}
         x-data="{show: false}"
         role="combobox"
         :aria-expanded="show"
         aria-controls="dropdown-menu"
         aria-haspopup="listbox"
         aria-label="{{ label }}">
        {{ parent() }}
        {% if(isFixedMobile) %}
            <div x-show="show"
                 x-transition.opacity
                 class="fixed md:hidden top-0 bottom-0 left-0 right-0 z-20 bg-dark-40 backdrop-blur-xl"
                 aria-hidden="true">
            </div>
            <template x-if="!$store.screen.isMobile">
                {% render "@template-dropdown-menu" with {items:items, role: "listbox"} %}
            </template>
            <template x-if="$store.screen.isMobile">
                {% render "@template-dropdown-menu" with {
                    isFixedMobile:true,
                    menuTitle:label,
                    items:items,
                    deactivateAnchor:true,
                    role: "listbox"
                } %}
            </template>
        {% else %}
            {% render "@template-dropdown-menu" with {items:items, role: "listbox"} %}
        {% endif %}
    </div>
{% endblock %}
 
{
  "label": "Label text"
}

No notes defined.