options

Description

Optional. Specifies a set of options to be used as segments of the control

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) an id of an option
• label - (required) the text content of a button segment (does not set the native tooltip)
• icon - the name of the icon to be used in a button segment
• title - the native browser tooltip text shown on hover (sets the HTML title attribute)
• tooltip - sets data-tooltip-text on the option'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 setup>
  const options = [
    { id: 1, label: "One", icon: "wxi-view-sequential", title: "Grid mode" },
    { id: 2, label: "Two", icon: "wxi-view-grid", title: "Tiles mode" },
    { id: 3, label: "Three", icon: "wxi-view-column", title: "Two panels mode" }
  ];
</script>

<template>
  <Segmented :options="options" :value="1" />
</template>

Related article: Setting the content of segments

Related sample: Segmented Button