<div class="demo-row"> <div class="rating" role="group" aria-label="评分 3.5 星，满分 5 星"> <button class="rating-star is-filled" type="button" aria-label="1 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button> <button class="rating-star is-filled" type="button" aria-label="2 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button> <button class="rating-star is-filled" type="button" aria-label="3 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button> <button class="rating-star is-half" type="button" aria-label="4 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button> <button class="rating-star" type="button" aria-label="5 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button> </div></div>安装
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';也可以用脚手架直接打印引入行：
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="rating" role="group" aria-label="评分 3.5 星，满分 5 星"> <button class="rating-star is-filled" type="button" aria-label="1 星">…星形 svg…</button> <button class="rating-star is-half" type="button" aria-label="4 星">…星形 svg…</button> <button class="rating-star" type="button" aria-label="5 星">…星形 svg…</button></div><!-- 填充态由使用方按分数挂 .is-filled / .is-half -->