输入类 · 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
onBlur失去焦点时的回调function()-
onChange选择时的回调function(value: number)-
onFocus获取焦点时的回调function()-
onHoverChange鼠标经过时数值变化的回调function(value: number)-
onKeyDown按键回调function(e: event)-
size尺寸, defaultsmallv >= 0.35.0 后支持传入 number 类型自定义尺寸string | numberdefault
style自定义样式对象object-
tooltips自定义每项的提示信息string[]-
value当前受控值number-

Accessibility

ARIA

  • Rating 具有 aria-checked 表示当前是否选中,aria-posinset 表示在列表的位置,aria-setsize 表示列表的长度

设计变量

© 2021 Semi Design. All rights reserved.

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

Designed & Developed with love by Douyin FE & MED