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>