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 React 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​

// handler function
function onClick() {
  console.log('search clicked');
}

const items: Array<any> = [
  {
    id: "search",
    comp: "button",
    icon: "wxi-search",
    css: "right",
    handler: onClick,
  },
];

// Usage in JSX
<Toolbar items={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 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",
    },
  ]}
/>