Rate 评分
v2.0.6+

评分组件，鼠标 hover 预览、click 选中、键盘方向键调整。支持半星、只读、主题色与文本提示。

基础用法

  • Preview
  • Code
鼠标移入星星预览，点击选中。 
<div class="bny-rate" data-value="3"></div>

半星 + 文本

  • Preview
  • Code
<div class="bny-rate"
     data-value="3.5"
     data-half
     data-show-text>
</div>

只读 + 主题色

  • Preview
  • Code
<div class="bny-rate" data-value="4"
     data-readonly color="blue">
</div>

配合 HTMX

  • Preview
  • Code
选值后会派发 change 事件，配合 hx-trigger="change" 即可提交到服务端。 
<div class="bny-rate"
     data-value="0"
     hx-post="/api/rate"
     hx-trigger="change"
     hx-vals='{\"id\": 123}'>
</div>

API

属性

属性说明
data-value当前分值，支持小数
data-max最大值，默认 5
data-half启用半星
data-readonly只读模式
data-show-text显示文本提示
data-texts文本数组，逗号分隔
color主题色：default/green/blue/yellow/red
size="sm/lg"尺寸变体