UNPKG

@mozaic-ds/vue

Version:

Mozaic-Vue is the Vue.js implementation of ADEO Design system

github.com/adeo/mozaic-vue

adeo/mozaic-vue

20 lines (13 loc) • 1.04 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# MSegmentedControl A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility. ## Props | Name | Description | Type | Default | | --- | --- | --- | --- | | `modelValue` | The selected segment index, bound via v-model. | `number` | `0` | | `full` | if `true`, the segmented control take the full width. | `boolean` | - | | `size` | Determines the size of the segmented control. | `"s"` `"m"` | `"s"` | | `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `{ label: string; }[]` | - | ## Events | Name | Description | Type | | --- | --- | --- | | `update:modelValue` | Emits when the selected segment changes, updating the modelValue prop. | [value: number] |