Skip to main content

items

items: Array<Item>

this property controls the contents of the toolbar. It defines an array of items that will be displayed. The default value is an empty array.

Item Structure​

  • id: string - unique identifier for the item
  • comp: string - specifies the component type (e.g., "button", "icon", "separator", "spacer")
  • icon: string - defines the icon to display
  • css: string - custom CSS class for styling
  • handler: function - event handler for item interaction
  • label: string - text label for the item
  • text: string - alternative text for display
  • layout: string - layout type for grouping items (e.g., "row")
  • items: Array<Item> - nested array of items for groups

Usage​

Defining button inside of toolbar​

<script>
  let items = [
    {
      id: "search",
      comp: "button",
      icon: "wxi-search",
      css: "right",
      handler: onClick,
    },
  ];
</script>

<Toolbar {items} />

all parameters are optional

Defining a group of items (column)​

<Toolbar
  items={[
    { label: "My App" },
    {
      layout: "row",
      items: [
        { comp: "icon", id: "add", icon: "wxi-plus" },
        { comp: "icon", id: "edit", icon: "wxi-pencil" },
        { comp: "icon", id: "delete", icon: "wxi-trash" },
      ],
    },
  ]}
/>

Defining icon inside of toolbar​

<Toolbar items={[{ comp: "icon", icon: "wxi-search" }]} />

Defining label inside of toolbar​

<Toolbar items={[{ text: "My App" }]} />

Defining a group of items (row)​

<Toolbar
  items={[
    { label: "My App" },
    {
      layout: "row",
      items: [
        { comp: "icon", id: "add", icon: "wxi-plus" },
        { comp: "icon", id: "edit", icon: "wxi-pencil" },
        { comp: "icon", id: "delete", icon: "wxi-trash" },
      ],
    },
  ]}
/>

Defining separator inside of toolbar​

<Toolbar
  items={[
    { comp: "icon", icon: "wxi-search" },
    { comp: "separator" },
    { comp: "icon", icon: "wxi-plus" },
  ]}
/>

Pushing items to the right side of toolbar​

<Toolbar
  items={[
    { id: "label", text: "My App" },
    { comp: "spacer" },
    {
      comp: "icon",
      icon: "wxi-search",
      css: "right",
    },
  ]}
/>