howdy_ui - v1.0.0

howdy/ui/menu

Dropdown menus: a list of actions opened from a button.

ui.button(Outline, menu.trigger("account"), [text("Account")]),
menu.menu("account", [], [
  menu.label([text("Signed in as ada")]),
  menu.item([event.on_click(OpenProfile)], [text("Profile")]),
  menu.checkbox_item(model.compact, [event.on_click(ToggleCompact)], [text("Compact view")]),
  menu.separator(),
  menu.link("/sign-out", [], [text("Sign out")]),
])

The arrow keys, Home, End and the first letters of an item move between items; Escape, Tab or choosing an item closes the menu and returns focus to the button. The trigger and the menu are tied by id, so both must be in the page or both in one live view.

Values

checkbox_item

</> 
pub fn checkbox_item(
  checked: Bool,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

An item that turns a setting on or off, with a tick when it is on. Choosing it flips the tick in the browser; a live view that keeps the setting should update it from the item’s click, so the two agree.

classes

</> 
pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

item

</> 
pub fn item(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

An action. Disable one with attribute.aria_disabled(True), which keeps it visible and announced but not chosen.

item_class

</> 
pub fn item_class() -> css.Class

label

</> 
pub fn label(
  children: List(element.Element(msg)),
) -> element.Element(msg)

A heading for the items after it.

label_class

</> 
pub fn label_class() -> css.Class
</> 
pub fn link(
  href: String,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

An item that goes to another page.

</> 
pub fn menu(
  id: String,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn menu_class() -> css.Class

radio_group

</> 
pub fn radio_group(
  label: String,
  items: List(element.Element(msg)),
) -> element.Element(msg)

Items of which exactly one is chosen, such as a sort order. Label the group; it is announced before its items.

radio_item

</> 
pub fn radio_item(
  checked: Bool,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

One choice in a radio_group, with a dot when it is the chosen one. Choosing it moves the dot in the browser; update your own state from its click too.

separator

</> 
pub fn separator() -> element.Element(msg)

separator_class

</> 
pub fn separator_class() -> css.Class
</> 
pub fn submenu(
  id: String,
  label label: List(element.Element(msg)),
  items items: List(element.Element(msg)),
) -> element.Element(msg)

An item that opens a menu of its own beside it: with the right arrow, Enter, a click, or by pointing at it. The left arrow or Escape closes it again. id must be unique in the document.

</> 
pub fn submenu_class() -> css.Class

A submenu opens beside its item, or on the other side if there is no room.

trigger

</> 
pub fn trigger(id: String) -> List(attribute.Attribute(msg))

Attributes for the button that opens the menu with this id.

✨ Search Document