chenzy-design

如何引入

import { Rating } from '@chenzy-design/svelte';

半星评分，受控值绑定。

评分：2.5

可交互评分与只读半星展示。

评分：3

半星只读展示

allowClear 控制再次点击当前值是否清零。

允许清除（再次点击当前值清零）：3

禁止清除：3

readonly 仅展示分值，disabled 置灰且不可交互。

只读：展示分值，不可交互

禁用：置灰且不可交互

character 自定义字符/图标，tooltips 提供逐项提示。

♥ ♥♥ ♥♥ ♥♥ ♥♥ ♥

自定义字符 + 逐项提示：一般

A AA AA AA AA A

自定义字符（字母）：3

size 调整尺寸，count 自定义评分项数量。

小号：3

大号：3

十分制（count=10）：7

allowHalf 可交互半星选值；size 传 number 配合自定义字符实现任意尺寸。

可交互半星：2.5

♥ ♥♥ ♥♥ ♥♥ ♥♥ ♥

size=40 + 自定义字符 + 半星

属性	说明	类型	默认值
`value`	受控值；提供则为受控	`number`	undefined
`defaultValue`	非受控初始值	`number`	0
`count`	图标总数	`number`	5
`allowHalf`	允许半星（步进 0.5）	`boolean`	false
`allowClear`	点击当前值清零	`boolean`	true
`character`	自定义字符/图标；不传则默认星形	`string \| Snippet<[{index,state,value}]>`	undefined
`size`	—	`'small'\|'default'\|'large'\|number`	default
`disabled`	—	`boolean`	false
`readonly`	—	`boolean`	false
`status`	—	`'default'\|'warning'\|'error'`	default
`tooltips`	逐项提示文案（native title），长度应等于 count	`string[]`	undefined
`autoFocus`	挂载时聚焦	`boolean`	false
`name`	—	`string`	undefined
`id`	根元素 id，关联 aria	`string`	自动生成
`ariaLabel`	无可视标签时的辅助名	`string`	i18n 默认
`style`	根元素内联样式，与内部 token 样式合并	`string`	undefined
`preventScroll`	autoFocus 聚焦时是否阻止滚动	`boolean`	undefined
`onChange`	—	`(v: number) => void`	undefined
`onHoverChange`	悬停预览值变化；移出时为当前 value	`(v: number) => void`	undefined
`onFocus`	根元素获得焦点	`() => void`	undefined
`onBlur`	根元素失去焦点	`() => void`	undefined
`onKeyDown`	按键事件（内部处理后透传）	`(e: KeyboardEvent) => void`	undefined

变量	默认值	用法
`--cd-rating-transition-duration`	`var(--cd-motion-duration-fast)`	星填充色过渡动画时长（组件消费）
`--cd-rating-transition-easing`	`var(--cd-motion-ease-standard)`	星填充色过渡动画曲线（组件消费）

ARIA role	`slider`
键盘交互	`ArrowRight/UpArrowLeft/DownHomeEndDeleteBackspace`