Etat Pur Design System

Template Dropdown Menu 

<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 class="dropdown-content" x-show="show" :aria-expanded="show"
    {% if not deactivateAnchor %}
    x-anchor.bottom-start.offset.0="$refs.dropdownButton"
    {% endif %}
    {% if isFixedMobile %}
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="translate-y-full"
        x-transition:enter-end="translate-y-0"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="translate-y-0"
        x-transition:leave-end="translate-y-full"
    {% else %}
        x-transition.opacity x-transition:enter.duration.200ms
    {% endif %}
    x-cloak @click.outside="show = false">
    {% if menuTitle %}
        <div class="dropdown-content-title">
            {{ menuTitle }}
            {% render "@template-button" with {
                color: "dark-ghost",
                size:"xs", type:'only-icon',
                icon: {name:'library--close-outline'},
                button_attribute: '@click="show = false"'
            } %}
        </div>
    {% endif %}
    {% for item in items %}
        {% render "@template-dropdown-item-" ~ (item.style is defined ? item.style : 'button') with item %}
    {% endfor %}
</div>
 
{
  "items": [
    {
      "label": "Item text",
      "style": "button"
    },
    {
      "label": "Link item text",
      "style": "button",
      "href": "https://www.google.com",
      "external": true
    },
    {
      "label": "Item text",
      "style": "button"
    },
    {
      "label": "Item with icon",
      "style": "button",
      "type": "leading-icon"
    }
  ]
}

No notes defined.