安装与调用
引入如下 CSS：
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Range/star.css">
基本效果示意
评星的本质是在一个范围内进行选择，因此使用 type="range" 范围输入框也可以实现，支持滑动，支持表单行为，通过添加 is="ui-rate" 实现。
<input type="range" is="ui-rate" max="5" step="0.5" value="3">
- max step value 三者要成倍数的关系，否则可能会导致星星展示不全
- min 只能设置 0 或者不设置，若要设置初始值，请设置 value，它的值要和 max 成倍数关系
指定星星数量
如果希望是 10 个星星，可以设置 numer="10"。
<input type="range" is="ui-rate" max="10" value="5" number="10">
如果希望自定义任意个数的评星数量，可以使用 CSS 变量 -ui-number 实现。
input type="range" is="ui-rate" max="6" value="2" style="--ui-number: 6;">
样式设置
尺寸设置
支持 size 属性进行尺寸设置，支持的值包括：large、medium、small、tiny。
对应效果和尺寸如下表所示：
| size值 | 对应高度 | 效果 |
|---|---|---|
| large | 2.5rem | |
| medium | 2rem | |
| small | 1.75rem | |
| tiny | 1.5rem |
如果希望是其他尺寸，可以通过修改 font-size 大小实现。
样式设置
可以使用 CSS 变量 --ui-rate-color 改变图形的颜色，可以使用 --ui-rate-source 改变使用的图形。
例如使用红色的爱心作为点评选项。
<input type="range" is="ui-rate" class="ui-heart" max="5" step="0.5" value="3">
.ui-heart {
--ui-rate-color: var(--ui-red);
--ui-rate-source: url(heart.svg);
--ui-rate-source-size: 80%;
}
只读和禁用
禁用设置 disabled 属性，样式上会表现为半透明。
<input type="range" is="ui-rate" disabled max="5" step="0.5" value="0">
只读设置 readonly 属性，只能浏览不能设置。
<input type="range" is="ui-rate" readonly max="5" step="0.5" value="3" tabindex="-1">
本页贡献者：
zhangxinxu