SegmentedControl

Compact switch between a few mutually exclusive views. Use size (xs, sm, md, lg, xl) to change density.

Import

Vue

import { UiSegmentedControl } from '@ziyarago/ui/vue'

Default

Vue

<UiSegmentedControl
  v-model="value"
  :items="[{ value: 'umrah', label: 'Umrah' }, { value: 'hajj', label: 'Hajj' }, { value: 'ziyarat', label: 'Ziyarat' }]"
 />

Small

Vue

<UiSegmentedControl
  size="sm"
  v-model="value"
  :items="[{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]"
 />

Sizes

Vue

<UiSegmentedControl
  v-model="value"
  :items="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="xs"
 />

<UiSegmentedControl
  v-model="value"
  :items="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="sm"
 />

<UiSegmentedControl
  v-model="value"
  :items="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="md"
 />

<UiSegmentedControl
  v-model="value"
  :items="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="lg"
 />

<UiSegmentedControl
  v-model="value"
  :items="[{ value: 'a', label: 'Day' }, { value: 'b', label: 'Week' }, { value: 'c', label: 'Month' }]"
  size="xl"
 />

API reference

Segmented switch for choosing exactly one of a few options.

Props

PropType and valuesDefaultDescription

itemsrequired{ value: string; label: string; icon?: string; disabled?: boolean }[]'[]'Segments to render. icon is an icon name; disabled: true dims one segment.

modelValuev-modelstring—Value of the selected segment.

sizexssmmdlgxl'md'Control size. sm and md also have a dedicated compact style.

blockbooleanfalseStretches the control to the container width with equal-width segments.

iconOnlybooleanfalseHides labels of segments that have an icon; the label stays as tooltip and aria-label.

ariaLabelstring—Accessible name of the group.

Events

Vue: @name. React: onName.

changeCalled with the value of the clicked segment.