Segmented
Display multiple options and allow users to select a single option.
Basic Usage
Set v-model to the option value is selected.
Disabled
Set disabled of segmented or option to true to disable it.
Block
Set block to true to fit the width of parent element.
Custom Content
Set default slot to render custom content.
Custom Style
Set default slot to render custom content.
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value | string / number | — |
| options | data of the options | array | [] |
| size | size of component | enum | '' |
| block | fit width of parent content | boolean | — |
| 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 | — |
Events
| Name | Description | Type |
|---|---|---|
| change | triggers when the selected value changes, the param is current selected value | Function |
Slots
| Name | Description |
|---|---|
| default | option renderer |
Type Declarations
Show declarations
type Option = {
label: string
value: string | number | boolean
disabled?: boolean
[key: string]: any
} | string | number | boolean | undefined
kooriookami