Item ​

An "item" of items prop is typed as below:

import { Component } from 'vue';

interface BaseItem {
  key: string;
}

interface NormalItem extends BaseItem {
  label?: string;
  alias?: string | string[];
  icon?: string | Component;
  role?: string;
  children?: Item[]
  onSelect?: () => void;
}

interface SeparatorItem extends BaseItem {
  separator: boolean;
  label?: string;
}

type Item = NormalItem | SeparatorItem;

key ​

• Type: number | string | symbol
• Required: true
• A unique key representing the current element, must be unique across all items.

label ​

• Type: string
• Default: null
• Required for all items except line separators.

alias ​

• Type: string | string[]
• Default: null

Alias is used to match the item when the user types in the search bar. If the user types in the search bar the alias of the item, the item will be selected.

icon ​

• Type: string | Component
• Default: null

The icon of the item, can be an image src or a component.

role ​

• Type: string
• Default: null

The role of the item that will be displayed on the right side of it.

children ​

• Type: Item[]
• Default: null

The children of the item. If the item has children, they will only display when the user selects the item or searchs accordingly.

onSelect ​

• Type: () => void
• Default: null

The function that will be called when the user selects the item.

separator ​

• Type: boolean
• Default: false

If set to true, the item will be displayed as a line separator. If the label is also set, the separator will be converted to a small sized label. A separator can't trigger any interactions, it is only meant to separate the content.