LineOne's dropdown menu: a white box under its button with links and actions, groups split by separators, icons, a header, a search field, people.
<.dropdown id="actions" label="Dropdown">
<.dropdown_item href="#">Action</.dropdown_item>
<.dropdown_item phx-click="archive">Archive</.dropdown_item>
<.dropdown_separator />
<.dropdown_item color="error" phx-click="delete">
<:icon><svg>…</svg></:icon>
Delete item
</.dropdown_item>
</.dropdown>toggle_icon draws LineOne's flat round icon button with the three dots (the menu of a card):
<.dropdown id="card-menu" toggle_icon="dots" placement="bottom-end">
<.dropdown_item href="#">Action</.dropdown_item>
</.dropdown>label draws LineOne's button with its turning chevron (color and shape style it); any
other trigger goes in the :toggle slot:
<.dropdown id="more">
<:toggle><.button icon variant="flat" shape="pill" aria-label="More">⋮</.button></:toggle>
…
</.dropdown>The keyboard works as in a menu (↑ ↓ Home End, letters, Esc, Tab). It opens and closes from
the browser (LineaUI.toggle("actions")), from the server (LineaUI.close(socket, "actions"))
or from open; on_open / on_close run whoever opened or closed it.
Summary
Functions
Renders a dropdown menu.
A title over the items, as in LineOne's "HTML Content" dropdown.
An item of the menu: a link with href, navigate or patch, a button otherwise
(phx-click, type="submit"...).
The search field across the menu, with LineOne's magnifier. Typing in it is not taken by the
menu's keys; phx-change, phx-debounce and name pass through.
The line between two groups of items.
Functions
Renders a dropdown menu.
Events: on_open and on_close push %{"id" => id} when they are event names.
Attributes
id(:string) (required)label(:string) - Draws LineOne's dropdown button with this text. Defaults tonil.color(:string) - The color of thelabelbutton. Defaults to"neutral". Must be one of"neutral","primary","secondary","info","success","warning", or"error".toggle_icon(:string) - Draws LineOne's flat icon-button trigger with three dots, horizontal (dots) or vertical (dots-vertical). It inherits the parent's text color and issize-8and round;labeland the:toggleslot win over it. Defaults tonil. Must be one ofnil,"dots", or"dots-vertical".toggle_class(:any) - Merged into thetoggle_iconbutton (-mr-2 size-7...). Defaults tonil.toggle_label(:string) - The accessible name of thetoggle_iconbutton. Defaults to"Menu".shape(:string) - The shape of the trigger button.nilisroundedfor thelabelbutton andpillfor thetoggle_iconone. Defaults tonil. Must be one ofnil,"rounded","pill", or"square".open(:boolean) - Defaults tofalse.placement(:string) - Defaults to"bottom-start". Must be one of"bottom-start","bottom","bottom-end","top-start","top","top-end","left-start","left","left-end","right-start","right", or"right-end".offset(:integer) - Pixels between the trigger and the menu. Defaults to4.close_on_select(:boolean) - Defaults totrue.on_open(:any) - An event name or a%JS{}. Defaults tonil.on_close(:any) - An event name or a%JS{}. Defaults tonil.target(:any) - Thephx-targetofon_open/on_closeevents. Defaults tonil.class(:any) - Merged into the menu box (w-72,h-36 overflow-y-auto...). Defaults tonil.- Global attributes are accepted.
Slots
toggle- A trigger of your own instead of thelabelbutton.inner_block(required)
A title over the items, as in LineOne's "HTML Content" dropdown.
Attributes
class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
An item of the menu: a link with href, navigate or patch, a button otherwise
(phx-click, type="submit"...).
Attributes
color(:string) - Defaults to"neutral". Must be one of"neutral","primary", or"error".variant(:string) -mediais the taller row LineOne uses for people (an avatar and two lines). Defaults to"default". Must be one of"default", or"media".disabled(:boolean) - Defaults tofalse.type(:string) - Defaults to"button".class(:any) - Defaults tonil.- Global attributes are accepted. Supports all globals plus:
["href", "navigate", "patch", "method", "download", "form", "name", "value"].
Slots
icon- Drawn before the text, as in LineOne's "Dropdown Icons".inner_block(required)
The search field across the menu, with LineOne's magnifier. Typing in it is not taken by the
menu's keys; phx-change, phx-debounce and name pass through.
Attributes
placeholder(:string) - Defaults tonil.name(:string) - Defaults tonil.value(:string) - Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted. Supports all globals plus:
["phx-debounce", "phx-throttle", "autocomplete", "form"].
The line between two groups of items.
Attributes
class(:any) - Defaults tonil.- Global attributes are accepted.