KRate

Used for rating.

Install

pnpm

pnpm add @ikun-ui/rate

yarn

yarn add @ikun-ui/rate

npm

npm install @ikun-ui/rate

Basic usage

Use colors prop to set color for different level.

default

color for different level

disabled

With allowHalf

Add attribute allowHalf Half star allowed.

With text

Using text to indicate rating score.

Add attribute showText to display text at the right of Rate. You can assign texts for different scores using texts.

ShowScore and ScoreTemplate

Add attribute showScore to display score at the right of Rate. You can customize score display by set scoreTemplate, which is a string and internally uses {value} to represent the score.

The score of IKunUI is 5 points

Clearable

You can reset the value to 0 when you click at the same value again.

More icons

You can use different icons to distinguish different rate components.

You can customize icons by passing icons.

Readonly

Read-only Rate is for displaying rating score. Half star is supported.

Use attribute readonly to make the component read-only. Add readonlyVoidIcon and readonlyVoidColor to set unselected icons and colors.

default

2.7 points

customize voidIcon and voidColor

Sizes

Add size attribute to change the size of Rate. It supports sm, md and lg.

Rate Props

Name	Type	Default	Description
max	number	5	max rating score.
value	number	0	rate value.
allowHalf	boolean	false	whether picking half start is allowed.
showScore	boolean	false	whether to display current score. showScore and showText cannot be true at the same time.
scoreTemplate	string	'{value}'	score template.
showText	boolean	false	whether to display texts.
texts	string / Record<number, string>	''	text or text map.
textColor	string	'var(--ikun-zinc-500)'	color of texts.
icons	string / Record<number, string>	'k-rate--active-icon'	icon or icons map, alias i-carbon-star-filled to k-rate--active-icon.
colors	string / Record<number, string>	'var(--ikun-amber-500)'	color or colors map.
voidIcon	string	'k-rate--void-icon'	void icon, alias i-carbon-star to k-rate--void-icon.
voidColor	string	'var(--ikun-stone-300)'	void icon color.
disabled	boolean	false	whether rate is disabled.
readonly	boolean	false	whether rate is readonly.
readonlyVoidIcon	string	'k-rate--readonly-icon'	readonly void icon, alias i-carbon-star-filled to k-rate--readonly-icon.
readonlyVoidColor	string	'var(--ikun-light-700)'	readonly void icon color.
clearable	boolean	false	whether value can be reset to 0.
size	sm | md |lg	md	size of rate.
cls	string	-	Additional class
attrs	Record<string, string>	{}	Additional attributes

Rate Events

Name	Description	Type
updateValue	Event fired when the value is changes.	(event: Event)=> void