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>A dropdown_submenu nests a menu that opens to the side, on hover, on click, or with → (←
or Esc goes back to its parent):
<.dropdown id="row" toggle_icon="dots">
<.dropdown_item phx-click="edit">Edit</.dropdown_item>
<.dropdown_submenu label="Move to">
<.dropdown_item phx-click="move" phx-value-to="archive">Archive</.dropdown_item>
<.dropdown_item phx-click="move" phx-value-to="trash">Trash</.dropdown_item>
</.dropdown_submenu>
</.dropdown>A long menu scrolls inside a scroll_area (LineaUI.Components.ScrollArea); keep submenus out
of a scrolling box, which would clip them.
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"...). A link takes target, rel, download, hreflang and
referrerpolicy, so it can open in a new tab or download a file
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.
An item that opens a nested menu to its side, holding dropdown_items (and separators,
headers, or further submenus). It opens when the pointer rests on it, on click, and with →,
Enter or Space, which also move the focus into it; ← and Esc close it and give the focus back.
It opens on the placement side, or the other one when the screen has no room there.
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"...). A link takes target, rel, download, hreflang and
referrerpolicy, so it can open in a new tab or download a file:
<.dropdown_item href={@danfe_url} target="_blank" rel="noopener">Open DANFE</.dropdown_item>
<.dropdown_item href={@xml_url} download="nfe.xml">Download XML</.dropdown_item>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", "replace", "download", "target", "rel", "hreflang", "referrerpolicy", "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.