Skip to main content

items

items: Array<Item>

This property allows defining items such as buttons, icons, and labels within the toolbar. Each item can have its own configuration.

Sub-properties​

  • id: string - Unique identifier for the item.
  • comp: string - Component type (e.g., "button", "icon").
  • icon: string - Icon class name.
  • css: string - CSS class name for styling.
  • handler: function - Event handler for the item.
  • label: string - Text label for the item.
  • layout: string - Layout type (e.g., "row", "column").
  • text: string - Text content for labels.
  • items: Array<Item> - Array of nested items for grouped layouts.

Defining a Button Inside the Toolbar​

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

<Toolbar {items} />

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 an Icon Inside the Toolbar​

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

Defining a Label Inside the 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" },
      ],
    },
  ]}
/>

Using Separator in 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",
    },
  ]}
/>