logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.20.6
  • 组件总览
  • 通用
    • Button
      按钮
    • FloatButton
      悬浮按钮
      5.0.0
    • Icon
      图标
    • Typography
      排版
  • 布局
    • Divider
      分割线
    • Flex
      弹性布局
      5.10.0
    • Grid
      栅格
    • Layout
      布局
    • Space
      间距
  • 导航
    • Anchor
      锚点
    • Breadcrumb
      面包屑
    • Dropdown
      下拉菜单
    • Menu
      导航菜单
    • Pagination
      分页
    • Steps
      步骤条
  • 数据录入
    • AutoComplete
      自动完成
    • Cascader
      级联选择
    • Checkbox
      多选框
    • ColorPicker
      颜色选择器
      5.5.0
    • DatePicker
      日期选择框
    • Form
      表单
    • Input
      输入框
    • InputNumber
      数字输入框
    • Mentions
      提及
    • Radio
      单选框
    • Rate
      评分
    • Select
      选择器
    • Slider
      滑动输入条
    • Switch
      开关
    • TimePicker
      时间选择框
    • Transfer
      穿梭框
    • TreeSelect
      树选择
    • Upload
      上传
  • 数据展示
    • Avatar
      头像
    • Badge
      徽标数
    • Calendar
      日历
    • Card
      卡片
    • Carousel
      走马灯
    • Collapse
      折叠面板
    • Descriptions
      描述列表
    • Empty
      空状态
    • Image
      图片
    • List
      列表
    • Popover
      气泡卡片
    • QRCode
      二维码
      5.1.0
    • Segmented
      分段控制器
    • Statistic
      统计数值
    • Table
      表格
    • Tabs
      标签页
    • Tag
      标签
    • Timeline
      时间轴
    • Tooltip
      文字提示
    • Tour
      漫游式引导
      5.0.0
    • Tree
      树形控件
  • 反馈
    • Alert
      警告提示
    • Drawer
      抽屉
    • Message
      全局提示
    • Modal
      对话框
    • Notification
      通知提醒框
    • Popconfirm
      气泡确认框
    • Progress
      进度条
    • Result
      结果
    • Skeleton
      骨架屏
    • Spin
      加载中
    • Watermark
      水印
      5.1.0
  • 其他
    • Affix
      固钉
    • App
      包裹组件
      5.1.0
    • ConfigProvider
      全局化配置
    • Util
      工具类
      5.13.0

Rate
评分

用于对事物进行评分操作。
使用import{ Rate }from"antd";
源码components/rate
文档编辑此页

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

何时使用

  • 对评价进行展示。
  • 对事物进行快速的评级操作。

代码演示

基本

最简单的用法。

codepen icon
External Link Icon
expand codeexpand code
normal
文案展现

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

codepen icon
External Link Icon
expand codeexpand code
allowClear: true
allowClear: false
清除

支持允许或者禁用清除。

codepen icon
External Link Icon
expand codeexpand code
  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4
  • 5
    5
自定义字符

可以使用 (RateProps) => ReactNode 的方式自定义每一个字符。

codepen icon
External Link Icon
expand codeexpand code
半星

支持选中半星。

codepen icon
External Link Icon
expand codeexpand code
只读

只读,无法进行鼠标交互。

codepen icon
External Link Icon
expand codeexpand code
  • A
    A
  • A
    A
  • A
    A
  • A
    A
  • A
    A
  • 好
    好
  • 好
    好
  • 好
    好
  • 好
    好
  • 好
    好
其他字符

可以将星星替换为其他字符,比如字母,数字,字体图标甚至中文。

codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

属性说明类型默认值版本
allowClear是否允许再次点击后清除booleantrue
allowHalf是否允许半选booleanfalse
autoFocus自动获取焦点booleanfalse
character自定义字符ReactNode | (RateProps) => ReactNode<StarFilled />function(): 4.4.0
className自定义样式类名string-
countstar 总数number5
defaultValue默认值number0
disabled只读,无法进行交互booleanfalse
keyboard支持使用键盘操作booleantrue5.18.0
style自定义样式对象CSSProperties-
tooltips自定义每项的提示信息string[]-
value当前数,受控值number-
onBlur失去焦点时的回调function()-
onChange选择时的回调function(value: number)-
onFocus获取焦点时的回调function()-
onHoverChange鼠标经过时数值变化的回调function(value: number)-
onKeyDown按键回调function(event)-

方法

名称描述
blur()移除焦点
focus()获取焦点

主题变量(Design Token)

全局 Token如何定制?