View Source BitstylesPhoenix.Alpine3.Dropdown (bitstyles_phoenix v2.5.0)

Components for rendering a dropdown menu powered by Alpine 3.

Summary

Functions

Renders a dropdown component with a button, a menu and options with Alpine3.

Functions

Renders a dropdown component with a button, a menu and options with Alpine3.

Supports all attributes and slots from BitstylesPhoenix.Component.Dropdown.ui_dropdown.

Attributes

  • x_name - The name of the boolean x-data property for alpine to store the menu state. Defaults to dropdownOpen.

Prevent page-flickering

The dropdown sets the x-cloak property on the menu to avoid flickering on initial page load. To make this work, you need to add the following snippet to your stylesheets:

[x-cloak] { display: none !important; }

See https://alpinejs.dev/directives/cloak for more information on x-cloak.

Dropdown with alpine

iex> assigns = %{}
...> render ~H"""
...> <.ui_js_dropdown>
...>   <:button label="Select me"/>
...>   <:menu>
...>     <.ui_dropdown_option href="#" class="u-h6">
...>       Option 1
...>     </.ui_dropdown_option>
...>     <.ui_dropdown_option href="#" class="u-h6">
...>       Option 2
...>     </.ui_dropdown_option>
...>   </:menu>
...> </.ui_js_dropdown>
...> """
"""
<div class="u-relative" x-data="{ dropdownOpen: false }">
  <button type="button" @click="dropdownOpen = true" class="a-button a-button--secondary">
    <span class="a-button__label">
      Select me
    </span>
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m a-button__icon" focusable="false" height="16" width="16">
      <use xlink:href="#icon-caret-down">
      </use>
    </svg>
  </button>
  <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s2-top" @click.away="dropdownOpen = false" x-cloak="x-cloak" x-show="dropdownOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
    <li>
      <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
        Option 1
      </a>
    </li>
    <li>
      <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
        Option 2
      </a>
    </li>
  </ul>
</div>
"""

Requires additional content on the page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.5.1/cdn.min.js" defer></script>
<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
  <symbol id="icon-caret-down" viewBox="0 0 100 100">
    <path d="M6.64,34.23a5.57,5.57,0,0,1,7.87-7.89L49.92,61.91,85.49,26.34a5.57,5.57,0,0,1,7.87,7.89L53.94,73.66a5.58,5.58,0,0,1-7.88,0Z" fill-rule="evenodd"/>
  </symbol>
</svg>

Custom x-data name and icon file

iex> assigns = %{}
...> render ~H"""
...> <.ui_js_dropdown x_name="myOwnDropDown">
...>   <:button label="Select me" icon_file="assets/icons.svg"/>
...>   <:menu>
...>     <.ui_dropdown_option href="#" class="u-h6">
...>       Option 1
...>     </.ui_dropdown_option>
...>     <.ui_dropdown_option href="#" class="u-h6">
...>       Option 2
...>     </.ui_dropdown_option>
...>   </:menu>
...> </.ui_js_dropdown>
...> """
"""
<div class="u-relative" x-data="{ myOwnDropDown: false }">
  <button type="button" @click="myOwnDropDown = true" class="a-button a-button--secondary">
    <span class="a-button__label">
      Select me
    </span>
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m a-button__icon" focusable="false" height="16" width="16">
      <use xlink:href="assets/icons.svg#icon-caret-down">
      </use>
    </svg>
  </button>
  <ul class="a-dropdown u-overflow-y-auto u-list-none u-margin-s2-top" @click.away="myOwnDropDown = false" x-cloak="x-cloak" x-show="myOwnDropDown" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
    <li>
      <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
        Option 1
      </a>
    </li>
    <li>
      <a href="#" class="a-button a-button--transparent a-button--menu u-h6">
        Option 2
      </a>
    </li>
  </ul>
</div>
"""

Requires additional content on the page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.5.1/cdn.min.js" defer></script>