Skip to main content

items

Description​

Optional. Defines an array of items that will be displayed in the toolbar

Usage​

items?: {
    id?: string | number;
    comp?: string | Component<any>;
    icon?: string;
    css?: string;
    handler?: (item: any, value?: any) => void;
    text?: string;
    menuText?: string;
    key?: string;
    spacer?: boolean;
    collapsed?: boolean;
    layout?: "column";
    items?: Array<any>;
    [key: string]: any;
}[];

Parameters​

  • id- (optional) unique identifier for an item
  • comp - (optional) specifies the component type (e.g., "button", "icon", "separator", "spacer") or it can be a Vue component
  • icon - (optional) defines the icon to display
  • css - (optional) custom CSS class for styling
  • handler- (optional) event handler for item interaction
  • key - (optional) text label for the item
  • spacer - (optional) if "true", the element will fill all available horizontal space ("false" by default)
  • collapsed - (optional) if "true", all toolbar items in the group will be collapsed ("false" by default)
  • text - (optional) alternative text for display
  • menuText - (optional) text to be displayed in the menu
  • layout - (optional) layout type for grouping items
  • items - (optional) nested array of items for groups
  • [key: string] - (optional) allows attaching attributes to a Toolbar item.

Examples​

Defining button inside of toolbar​

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

<template>
  <Toolbar :items="items" />
</template>

Defining a group of items (column)​

<template>
  <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' },
        ],
      },
    ]"
  />
</template>

Defining icon inside of toolbar​

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

Defining label inside of toolbar​

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

Defining a group of items (row)​

<template>
  <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' },
        ],
      },
    ]"
  />
</template>

Defining separator inside of toolbar​

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

Pushing items to the right side of toolbar​

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