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);
}