glaze_basecoat - v1.0.0

glaze/basecoat/dropdown_menu

Basecoat documentation: https://basecoatui.com/components/dropdown-menu/

The dropdown helpers compose trigger and menu markup for small action lists and contextual menus.

Note: This component requires JavaScript from Basecoat.

Anatomy

A dropdown usually has a trigger control and a content panel containing one or more item entries.

Recipe

import glaze/basecoat/dropdown_menu
import glaze/basecoat/button
import lustre/element/html

fn my_dropdown() {
  dropdown_menu.dropdown("my-menu", [
    dropdown_menu.trigger([button.outline()], [html.text("Open")]),
    dropdown_menu.content([dropdown_menu.min_width("14rem")], [
      dropdown_menu.group("Options", [
        dropdown_menu.item([], [html.text("Profile")]),
        dropdown_menu.item([], [html.text("Settings")]),
      ]),
      dropdown_menu.separator(),
      dropdown_menu.item([dropdown_menu.disabled()], [html.text("Logout")]),
    ]),
  ])
}

References

Values

align

</> 
pub fn align(a: String) -> attribute.Attribute(msg)

checkbox_item

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

content

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

content_with_ids

</> 
pub fn content_with_ids(
  popover_id: String,
  menu_id: String,
  trigger_id: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

disabled

</> 
pub fn disabled() -> attribute.Attribute(msg)
</> 
pub fn dropdown(
  id: String,
  children: List(element.Element(msg)),
) -> element.Element(msg)

group

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

heading

</> 
pub fn heading(
  id: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

item

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

item_with_shortcut

</> 
pub fn item_with_shortcut(
  shortcut: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

min_width

</> 
pub fn min_width(width: String) -> attribute.Attribute(msg)

radio_item

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

separator

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

side

</> 
pub fn side(s: String) -> attribute.Attribute(msg)

trigger

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

trigger_with_ids

</> 
pub fn trigger_with_ids(
  trigger_id: String,
  menu_id: String,
  popover_id: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
✨ Search Document