Source code

src/showcase/pages/components/dropdown.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the dropdowns component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentDropdown"}'
  ></include>
  <div class="catalog-grid">
    <article class="card catalog-overflow">
      <header class="card-header"><h2 x-text="$t('galleryDropdown')"></h2></header>
      <div class="card-body">
        <div
          class="dropdown"
          x-data="uiDropdown"
          @click.outside="open = false"
          @keydown.escape.stop="close"
          @keydown.arrow-down="move"
          @keydown.arrow-up="move"
        >
          <button class="btn btn-secondary" x-ref="trigger" @click="toggle" :aria-expanded="open">
            <span x-text="$t('actions')"></span>
            <span x-icon="'down'"></span>
          </button>
          <div class="dropdown-menu" x-ref="menu" x-show="open" x-cloak>
            <button
              class="dropdown-item"
              @click="$store.toasts.push($t('toastExample')); close()"
              x-text="$t('edit')"
            ></button>
            <a class="dropdown-item" href="/profile" x-link x-text="$t('profile')"></a>
            <hr class="dropdown-divider" />
            <button class="dropdown-item" disabled x-text="$t('disabled')"></button>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>