<div class="demo-row"> <div class="icen-rating" role="group" aria-label="评分 3.5 星，满分 5 星"> <button class="icen-rating-star is-filled" type="button" aria-label="1 星"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M10 2.5l2.4 5.1 5.6.4-4.2 3.7 1.3 5.5-5.1-3-5.1 3 1.3-5.5L1.8 8l5.6-.4Z"></path></svg></button> <button class="icen-rating-star is-filled" type="button" aria-label="2 星"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M10 2.5l2.4 5.1 5.6.4-4.2 3.7 1.3 5.5-5.1-3-5.1 3 1.3-5.5L1.8 8l5.6-.4Z"></path></svg></button> <button class="icen-rating-star is-filled" type="button" aria-label="3 星"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M10 2.5l2.4 5.1 5.6.4-4.2 3.7 1.3 5.5-5.1-3-5.1 3 1.3-5.5L1.8 8l5.6-.4Z"></path></svg></button> <button class="icen-rating-star is-half" type="button" aria-label="4 星"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M10 2.5l2.4 5.1 5.6.4-4.2 3.7 1.3 5.5-5.1-3-5.1 3 1.3-5.5L1.8 8l5.6-.4Z"></path></svg></button> <button class="icen-rating-star" type="button" aria-label="5 星"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M10 2.5l2.4 5.1 5.6.4-4.2 3.7 1.3 5.5-5.1-3-5.1 3 1.3-5.5L1.8 8l5.6-.4Z"></path></svg></button> </div></div>特性
- 精度：
is-filled实星 /is-half半星 - 尺寸：
icen-rating--sm/ 默认 /icen-rating--lg
接口
- 初始化
initRating()（kit 一行入口可直接命名导入）- 导出
-
initRating共享行为模块，清单含族内导出 - 事件
-
icen:check-changeicen:page-changeicen:rating-changeicen:segmented-changeicen:sort-changeicen:step-changeicen:stepper-changeicen:switch-changedetail 契约见IcenEventMap；共享行为模块，清单含族内事件 - 类型
dist/behaviors/controls.d.mts（随 npm 包发布，含全部 JSDoc 约束）
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/rating';import { initRating } from '@icen.ai/ui';initRating();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add rating
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/media.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<div class="icen-rating" role="group" aria-label="评分 3.5 星，满分 5 星"> <button class="icen-rating-star is-filled" type="button" aria-label="1 星">…星形 svg…</button> <button class="icen-rating-star is-half" type="button" aria-label="4 星">…星形 svg…</button> <button class="icen-rating-star" type="button" aria-label="5 星">…星形 svg…</button></div><!-- 填充态由使用方按分数挂 .is-filled / .is-half -->