Semi Design 评分组件(Rating)使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00845/article/details/148419043

Semi Design 评分组件(Rating)使用指南

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design

概述

评分组件(Rating)是 Semi Design 提供的一个用于展示和收集用户评分的输入类组件。它允许用户通过点击星星(或其他自定义图标)来表达对某事物的评价等级。该组件支持多种定制化选项，包括半星选择、自定义图标、尺寸调整等，能够满足不同场景下的评分需求。

基础使用

引入组件

首先需要从 Semi Design 中引入 Rating 组件：

import { Rating } from '@douyinfe/semi-ui';

基本用法

最简单的用法是显示默认的五星评分：

<Rating defaultValue={3} />

组件支持两种预设尺寸：default(默认)和small(小尺寸)。也可以通过传入数字来自定义尺寸。

<div>
    <Rating defaultValue={5}/>
    <Rating size='small' defaultValue={5}/>
</div>

进阶功能

半星评分

通过设置 allowHalf 属性可以启用半星评分功能。这个属性不仅支持0.5的增量，还可以显示任意小数评分。

<div>
    <Rating allowHalf defaultValue={3.5}/>
    <Rating allowHalf defaultValue={3.65} disabled/>
</div>

只读模式

设置 disabled 属性可以将评分组件设为只读状态，用户无法进行交互。

<Rating disabled defaultValue={3} />

清除功能

默认情况下，点击已选中的星星会清除评分。可以通过 allowClear 属性控制这一行为。

<div>
    <span>允许清除</span>
    <Rating allowClear={true} defaultValue={3}/>
    
    <span>禁止清除</span>
    <Rating allowClear={false} defaultValue={3}/>
</div>

自定义配置

添加描述文案

可以配合评分显示相应的描述文字，提升用户体验。

const [value, setValue] = useState(0);
const desc = ['很差', '较差', '一般', '良好', '优秀'];

return (
    <div>
        <span>您的评价: {value ? <span>{desc[value - 1]}</span> : ''}</span>
        <Rating tooltips={desc} onChange={setValue} value={value} />
    </div>
);

完全自定义

Rating 组件支持高度自定义，包括：

自定义评分图标（支持使用 Semi 图标库或其他 React 节点）
自定义评分数量
自定义尺寸和样式

<div>
    {/* 使用心形图标 */}
    <Rating character={<IconLikeHeart />} defaultValue={3}/>
    
    {/* 自定义尺寸的心形图标 */}
    <Rating size={48} allowHalf character={<IconLikeHeart />} defaultValue={3}/>
    
    {/* 使用文字作为评分符号 */}
    <Rating character="赞" size={18} defaultValue={3}/>
    
    {/* 10分制评分 */}
    <Rating count={10} defaultValue={6}/>
</div>

无障碍访问

Rating 组件遵循 WAI-ARIA 规范，确保残障用户也能正常使用：

ARIA 属性：
- aria-checked 表示当前选中状态
- aria-posinset 表示当前项在列表中的位置
- aria-setsize 表示评分项总数
键盘导航：
- 使用方向键(上/下/左/右)在评分项间导航
- 初始焦点会根据当前值自动设置
语义化：
- 支持通过 aria-label 或字符串类型的 character 属性提供语义化描述