BitstylesPhoenix.Alpine3.Dropdown.ui_dropdown

You're seeing just the function ui_dropdown, go back to BitstylesPhoenix.Alpine3.Dropdown module for more information.

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

Dropdown with alpine

iex> assigns = %{}
...> render ~H"""
...> <div style="min-height: 200px">
...>   <.ui_dropdown icon_file="assets/icons.svg">
...>     <:button label="Select me"/>
...>     <:option>
...>       <%= ui_button "Option 1", to: "#", variant: "menu", class: "u-h6" %>
...>     </:option>
...>     <:option>
...>       <%= ui_button "Option 2", to: "#", variant: "menu", class: "u-h6" %>
...>     </:option>
...>   </.ui_dropdown>
...> </div>
...> """
"""
<div style="min-height: 200px">
  <div class="u-relative" x-data="{ dropdownOpen: false }">
    <button type="button" class="a-button a-button--ui u-h6" @click="dropdownOpen = true">
      <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 a-list-reset u-margin-s-top" @click.away="dropdownOpen = false" x-show="dropdownOpen">
      <li>
        <a class="a-button a-button--menu u-h6" href="#">
          Option 1
        </a>
      </li>
      <li>
        <a class="a-button a-button--menu u-h6" href="#">
          Option 2
        </a>
      </li>
    </ul>
  </div>
</div>
"""

Requires additional content on the page:

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