评分
用于对事物进行评分操作。
何时使用
- 对评价进行展示。
- 对事物进行快速的评级操作。
代码演示
- 基本 ·
basic - 尺寸 ·
size - 半星 ·
half - 文案展现 ·
text - 只读 ·
disabled - 清除 ·
clear - 其他字符 ·
character - 自定义字符 ·
character-function
API
通用属性参考:通用属性
| 属性 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| allowClear | 是否允许再次点击后清除 | boolean | true | × | |
| allowHalf | 是否允许半选 | boolean | false | × | |
| character | 自定义字符 | ReactNode | (RateProps) => ReactNode | <StarFilled /> | function(): 4.4.0 | × |
| count | star 总数 | number | 5 | × | |
| defaultValue | 默认值 | number | 0 | × | |
| disabled | 只读,无法进行交互 | boolean | false | × | |
| keyboard | 支持使用键盘操作 | boolean | true | 5.18.0 | × |
| size | 星星尺寸 | 'small' | 'medium' | 'large' | 'medium' | × | |
| tooltips | 自定义每项的提示信息 | TooltipProps[] | string[] | - | × | |
| value | 当前数,受控值 | number | - | × | |
| onBlur | 失去焦点时的回调 | function() | - | × | |
| onChange | 选择时的回调 | function(value: number) | - | × | |
| onFocus | 获取焦点时的回调 | function() | - | × | |
| onHoverChange | 鼠标经过时数值变化的回调 | function(value: number) | - | × | |
| onKeyDown | 按键回调 | function(event) | - | × |
方法
| 名称 | 描述 |
|---|---|
| blur() | 移除焦点 |
| focus() | 获取焦点 |
主题变量(Design Token)
类型、继承关系和原生令牌声明保持固定源码原文;默认值由原生主题计算,并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。
| 令牌 | 类型 | 原生说明 |
|---|---|---|
starColor | string | 星星颜色 |
starSize | number | 星星尺寸 |
starSizeSM | number | 小星星尺寸 |
starSizeLG | number | 大星星尺寸 |
starHoverScale | CSSObject['transform'] | 星星悬浮时的缩放 |
starBg | string | 星星背景色 |
声明来源: vendor/components/rate/style/index.ts
import type { CSSObject } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc 星星颜色
* @descEN Star color
*/
starColor: string;
/**
* @desc 星星尺寸
* @descEN Star size
*/
starSize: number;
/**
* @desc 小星星尺寸
* @descEN Small star size
*/
starSizeSM: number;
/**
* @desc 大星星尺寸
* @descEN Large star size
*/
starSizeLG: number;
/**
* @desc 星星悬浮时的缩放
* @descEN Scale of star when hover
*/
starHoverScale: CSSObject['transform'];
/**
* @desc 星星背景色
* @descEN Star background color
*/
starBg: string;
}
interface RateToken extends FullToken<'Rate'> {}
原生通用属性
Tips: 以下通用属性适用于 antd 大部分组件,不支持的组件会单独说明。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| style | 自定义样式 | CSSProperties | - |
| className | 自定义类名 | string | - |
| rootClassName | 添加在组件最外层的 className | string | - |
| autoFocus | 自动获取焦点,仅对表单类、链接、交互容器等可聚焦元素生效 | boolean | false |
安装并复现示例
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
使用 ConfigProvider 和原生 App,并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示,不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。
原生类型参考
源码查看器包含未修改的原生实现和以下声明文件,继承类型仍位于原生包中。代码中的英文注释保留为源码参考。
vendor/components/rate/index.tsxvendor/components/rate/style/index.ts
来源与许可
https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd
保留原生中英文正文与可执行示例;官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可,另列依赖的许可证也需保留。上传预览禁止向外发起请求,不提供后端服务。