输入类 · Rating
评分
展示评分的组件

代码演示

如何引入

基本用法

最简单的用法,支持两种尺寸 defaultsmall
v >= 0.35.0 后支持传入 number 类型自定义尺寸。具体可以参考自定义

半星

通过设置 allowHalf 属性可以支持选择半星。0.28.0 版本之后,设置 allowHalf 属性支持展示除0.5以外的小数。

只读

通过设置 disabled 属性将无法进行交互。

点击清除

通过设置 allowClear 属性允许再次点击时清除数值,默认为 true

文案展现

给评分组件加上文案展示。

自定义

自定义评分字符、个数及尺寸。
v >= 0.35.0 自定义尺寸需要配合自定义的字符才能生效。

API参考

属性说明类型默认值
allowClear是否允许再次点击后清除booleantrue
allowHalf是否允许半选booleanfalse
autoFocus自动获取焦点booleanfalse
character自定义字符ReactNode<IconStar size="extra-large"/>
className自定义样式类名string-
countstar 总数number5
defaultValue默认值number0
disabled只读,无法进行交互booleanfalse
preventScroll指示浏览器是否应滚动文档以显示新聚焦的元素,作用于组件内的 focus 方法boolean
size尺寸, defaultsmallv >= 0.35.0 后支持传入 number 类型自定义尺寸string | numberdefault
style自定义样式对象object-
tooltips自定义每项的提示信息string[]-
value当前受控值number-
onBlur失去焦点时的回调function()-
onChange选择时的回调function(value: number)-
onFocus获取焦点时的回调function()-
onHoverChange鼠标经过时数值变化的回调function(value: number)-
onKeyDown按键回调function(e: event)-

Accessibility

ARIA

  • Rating 具有 aria-checked 表示当前是否选中,aria-posinset 表示在列表的位置,aria-setsize 表示列表的长度。
  • Semi 支持自定义 Rating 的语义:
    • 可以使用 aria-label 来定制 Rating 的语义化;
    • 若用户传入的 character 类型为 string,将使用这个 string 来做 Rating 的语义化;
    • aria-label的优先级高于string的character

键盘和焦点

  • Rating 的初始焦点设置:
    • 若 Rating 有选择项时,初始焦点应当设置为最后一个选择项时(如:有 3颗🌟被点亮,则初始焦点设置在第三颗被点亮的🌟上);
    • 若 Rating 没有选择项时,初始焦点应当为整个 Rating。
  • 一个 Rating 组上,可以通过 右箭头上箭头 选中当前焦点的下一个焦点项,左箭头下箭头 选中当前焦点的上一个焦点项;
    • 用户设置了 allowHalf 属性,按方向键只选中或取消选中半颗星;
  • disabled的 Rating 无法被获取到焦点。

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED