Segmented Controls.
When To Use
- When displaying multiple options and user can select a single option;
- When switching the selected option, the content of the associated area changes.
API
| Property |
Description |
Type |
Default |
Version |
| block |
Option to fit width to its parent's width |
boolean |
false |
|
| disabled |
Disable all segments |
boolean |
false |
|
| options |
Set children optional |
string[] | number[] | SegmentedOption[] |
[] |
|
| size |
The size of the Segmented. |
large | middle | small |
- |
|
| value |
Currently selected value |
string | number |
|
|
| label |
custom label by slot |
v-slot:label="SegmentedBaseOption" |
|
|
events
| Events Name |
Description |
Arguments |
|
| change |
The callback function that is triggered when the state changes |
function(value: string | number) |
- |
SegmentedBaseOption、 SegmentedOption
interface SegmentedBaseOption {
value: string | number;
disabled?: boolean;
payload?: any; // payload more data
/**
* html `title` property for label
*/
title?: string;
className?: string;
}
interface SegmentedOption extends SegmentedBaseOption {
label?: VueNode | ((option: SegmentedBaseOption) => VueNode);
}