docs/en-US/component/segmented.md
Display multiple options and allow users to select a single option.
Set v-model to the option value is selected.
:::demo
segmented/basic
:::
Set vertical to change direction.
:::demo
segmented/custom-direction
:::
Set disabled of segmented or option to true to disable it.
:::demo
segmented/disabled
:::
When your options format is different from the default format, you can customize the alias of the options through the props attribute
:::demo
segmented/props
:::
Set block to true to fit the width of parent element.
:::demo
segmented/block
:::
Set default slot to render custom content.
:::demo
segmented/custom-content
:::
Set custom styles using CSS variables.
:::demo
segmented/custom-style
:::
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
| options | data of the options | ^[array]Option[] | [] |
| props ^(2.9.8) | configuration options, see the following table | ^[object] | — |
| size | size of component | ^[enum]'' | 'large' | 'default' | 'small' | '' |
| block | fit width of parent content | ^[boolean] | false |
| disabled | whether segmented is disabled | ^[boolean] | false |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| name | native name attribute | ^[string] | — |
| id | native id attribute | ^[string] | — |
| aria-label ^(a11y) | native aria-label attribute | ^[string] | — |
| direction ^(2.8.7) | display direction | ^[enum]'horizontal' | 'vertical' | horizontal |
| Attribute | Description | Type | Default |
|---|---|---|---|
| value | specify which key of node object is used as the node's value | ^[string] | value |
| label | specify which key of node object is used as the node's label | ^[string] | label |
| disabled | specify which key of node object is used as the node's disabled | ^[string] | disabled |
| Name | Description | Type |
|---|---|---|
| change | triggers when the selected value changes, the param is current selected value | ^[Function](val: any) => void |
| Name | Description | Type |
|---|---|---|
| default | option renderer | ^[object]{ item: Option } |
type Option = Record<string, any> | string | number | boolean