评分

rating

is-filled 实星 / is-half 半星（warning 色）；另有 rating--sm / rating--lg 尺寸。

示例

<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/ui
import '@icen.ai/ui/components/media.css';

用法

<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 -->