DevactionUI.Dropdown (devaction_ui v0.2.3)

Copy Markdown View Source

A button that opens a menu of actions or a choice (sort by deadline, by value, by risk). The menu opens under the button (above it when there is no room below); ↑ ↓ Home End move between items, Enter or Space chooses, Esc closes and returns to the button, a click outside closes it (DevactionUI.Dropdown hook).

An item is a plain action (role="menuitem") or one of a group of choices (checked is not nil, then role="menuitemradio" with a 16px ring before the label, filled on the chosen one). It sends event with choice, or goes to navigate, patch or href. A separator puts a rule above the item, a heading puts a small caption above it (the name of a group of choices), danger colors it as destructive and disabled leaves it out of the keys and the clicks. Type a letter (or the first letters of a name) and the focus jumps to the next item that starts with it. An item may begin with an icon: it takes the color of the text, so a danger item has a red icon too.

An item sends value as choice, and values, a map, as one phx-value-* each (values={%{id: 7, kind: "task"}} arrives as "id" and "kind"). The menu closes when an item is chosen and gives the focus back to the button; close_on_select={false} keeps it open (a menu of toggles).

The button is a bordered box by default (variant: :outline). variant: :ghost drops the border and variant: :icon is a square with only an icon (the "more" menu of a row): give it a trigger_label, which is its accessible name. trigger_class adds classes to the button.

Summary

Functions

dropdown(assigns)
menu_item(assigns)

One item of a menu: what dropdown/1 and DevactionUI.ContextMenu draw for each :item slot.

Functions