ikun-uiKSegmented
When displaying multiple options and user can select a single option.
Install
bash
pnpm add @ikun-ui/segmentedbash
yarn add @ikun-ui/segmentedbash
npm install @ikun-ui/segmentedBasic usage
The most basic usage.
Block segmented
block property will make the Segmented fit to its parent width.
Disabled
Disabled Segmented.
Daily
Weekly
Monthly
Quarterly
Yearly Yearly Yearly
Daily
Weekly
Monthly
Quarterly
Yearly Yearly Yearly
Custom render
Custom each Segmented Item by slot.
Sizes
There are three sizes of an Segmented
Daily
Weekly
Monthly
Quarterly
Yearly
Daily
Weekly
Monthly
Quarterly
Yearly
Daily
Weekly
Monthly
Quarterly
Yearly
Icon
Set icon for Segmented Item.
Just Only icon
Set icon without label for Segmented Item.
Segmented Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | number | '' | Selected value. |
| size | sm | md | lg | md | Size of segmented |
| block | boolean | false | Option to fit width to its parent's width. |
| cls | string | '' | Additional class for component |
| attrs | Record<string, string> | {} | Additional attributes |
Segmented Events
| Name | Description | Type |
|---|---|---|
| change | The callback function that is triggered when the state changes. | (value: string | number)=> void |
Segmented Slots
| Name | Description |
|---|---|
| default | content of segmented component |
SegmentedItem Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | number | - | The callback value of SegmentedItem. Clicking on SegmentedItem will be passed to the event as a parameter.. |
| disabled | boolean | false | Whether the SegmentedItem is disabled. |
| label | string | - | Display value of SegmentedItem. |
| icon | string | - | The front icon of SegmentedItem, which should comply with unocss standard. |
| onlyIcon | boolean | false | Show only icons. |
| cls | string | '' | Additional class for component |
| attrs | Record<string, string> | {} | Additional attributes |
SegmentedItem Events
| Name | Description | Type |
|---|---|---|
| click | The callback function that is triggered when click segmentedItem. | (value: string | number)=> void |
SegmentedItem Slots
| Name | Description |
|---|---|
| default | content of segmentedItem component |