options

Description

Optional. Specifies an array of options that will be used as tabs

Usage

options?: {
  id: string | number;
  label?: string;
  icon?: string;
  title?: string;
  tooltip?: string;
}[];

Parameters

An object of the options array may have the following properties:

• id - (required) the id of a tab
• label - (optional) the text of a tab
• icon - (optional) the name of the icon to be used in a tab
• title - (optional) the native browser tooltip text shown on hover (sets the HTML title attribute)
• tooltip - (optional) sets data-tooltip-text on the tab's <button>; works with a parent <Tooltip> component

note

The tooltip is independent of the title prop. Both can be set simultaneously when each displays its own tooltip (the browser's native one and the SVAR one) but make sure it's not redundant in your case.

Example

<script>
  const tabs = [
    { id: 0, label: "Info", icon: "wxi-alert" },
    { id: 1, label: "About" },
    { id: 2, label: "Contact" },
    { id: 3, label: "", icon: "wxi-check" }
  ];
</script>

<Tabs options={tabs} value={1} />

Related article: Creating tabs

Related sample: Tabs