SupabaseSurface.Components.Dropdown (supabase_surface v0.1.1)
A dropdown component using alpinejs.
The Dropdown defines an Alpine.js block and initializes a variable open: false
indicating if the dropdown should be open.
The default slot is used for the activator of the dropdown, for example a <button />,
which needs to add the alpine click handlers. See example below:
Example
<Dropdown id="user-menu"
transition={{
enter: "transition ease-out origin-top-left duration-200",
enter_start: "opacity-0 transform scale-90",
enter_end: "opacity-100 transform scale-100",
leave: "transition origin-top-left ease-in duration-100",
leave_start: "opacity-100 transform scale-100",
leave_end: "opacity-0 transform scale-90"
}}
>
<DropdownItem to="/profile">
<DropdownItemIcon>{{ Heroicons.Outline.user(class: "w-4 h-4") }}</DropdownItemIcon>
<Typography.Text>Profile</Typography.Text>
</DropdownItem>
<DropdownItem to="/logout" method={{ :post }}>
<DropdownItemIcon>{{ Heroicons.Outline.logout(class: "w-4 h-4") }}</DropdownItemIcon>
<Typography.Text>Logout</Typography.Text>
</DropdownItem>
<Button
type="link"
opts={{ "@click": "open = !open", "@click.away": "open = false", "@keydown.escape.window": "open = false" }}
>
Click me
</Button>
</Dropdown>
Note: Alpine.js is used here to avoid needing a complete server roundtrip just to open the dropdown. As a result this can provide better UX.
Properties
- transition :keyword, default: [] - Tailwind transition classes to apply to the dropdown..
- side :string, values: ["top", "bottom", "left", "right"], default: "bottom" - Where to put the dropdown.
- align :string, values: ["start", "end", "center"], default: "center" - How to align the dropdown.
Slots
- items, required: true - The dropdown items.
- default, required: true - The clickable element activating the dropdown.
Link to this section Summary
Functions
Callback implementation for Phoenix.LiveComponent.mount/1
.
Callback implementation for Phoenix.LiveComponent.update/2
.
Link to this section Functions
Link to this function
mount(socket)
Callback implementation for Phoenix.LiveComponent.mount/1
.
Link to this function
update(assigns, socket)
Callback implementation for Phoenix.LiveComponent.update/2
.