KSegmented

When displaying multiple options and user can select a single option.

Install

pnpm

pnpm add @ikun-ui/segmented

yarn

yarn add @ikun-ui/segmented

npm

npm install @ikun-ui/segmented

Basic usage

The most basic usage.

Block segmented

block property will make the Segmented fit to its parent width.

Disabled

Disabled Segmented.

Custom render

Custom each Segmented Item by slot.

Sizes

There are three sizes of an Segmented

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