Toolbar

Action toolbar with grouped buttons and keyboard navigation.

Demo

Usage

@styled_toolbar.toolbar(
  "formatting",
  [
    @styled_toolbar.ToolbarGroup([
      @styled_toolbar.toolbar_item_config("bold", "B", pressed=true),
      @styled_toolbar.toolbar_item_config("italic", "I"),
      @styled_toolbar.toolbar_item_config("underline", "U"),
    ]),
    @styled_toolbar.ToolbarGroup([
      @styled_toolbar.toolbar_item_config("left", "L"),
      @styled_toolbar.toolbar_item_config("center", "C"),
      @styled_toolbar.toolbar_item_config("right", "R"),
    ]),
  ],
  aria_label="Text formatting",
  on_item_click=fn(id) { println("Clicked: " + id) },
)

Props

Prop	Type	Default	Description
id	String	-	Toolbar ID
groups	Array[ToolbarGroup]	-	Button groups
aria_label	String	"Toolbar"	Accessible label
class	String?	None	Additional CSS class
onitemclick	(String) -> Unit	-	Click handler

BEM Classes

Class	Description
`.toolbar`	Root container
`.toolbar__inner`	Inner wrapper with border
`.toolbar__group`	Button group
`.toolbar__item`	Individual button
`.toolbar__separator`	Group separator

States

State	Description
`data-pressed`	Toggle button pressed
`data-selected`	Selected item
`data-disabled`	Disabled item

Keyboard

Key	Action
Arrow Left	Previous button
Arrow Right	Next button
Home	First button
End	Last button