Rating 评分

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

Guide

评分组件通常用于用户反馈场景。

API

Rating

ARIA and KeyBoard

代码示例

基本

最简单的用法。

查看源码在线预览

import { Rating } from '@alifd/next';
ReactDOM.render(<div>
    <Rating defaultValue={3.2} onChange={val => console.log('change:', val)} onHoverChange={val => console.log('hover:', val)} />
</div>, mountNode);

尺寸

通过 size 属性可以控制评分组件的大小，支持三种尺寸 small, medium, large。默认尺寸为 medium 。

查看源码在线预览

import { Rating } from '@alifd/next';
ReactDOM.render(<div>
    <Rating defaultValue={3.2} size="small" />
    <br/>
    <br/>
    <Rating defaultValue={3.2} />
    <br/>
    <br/>
    <Rating defaultValue={3.2} size="large" />
</div>, mountNode);

半星评分

默认情况下评分组件只支持整数评分，通过开启 allowHalf 属性可以支持半星评分。

查看源码在线预览

import { Rating } from '@alifd/next';
ReactDOM.render(<Rating defaultValue={3.2} allowHalf />, mountNode);

只读模式

设置 disabled 属性后，评分组件仅展示模式，不可选择。

查看源码在线预览

import { Rating } from '@alifd/next';
ReactDOM.render(<Rating defaultValue={3.2} disabled />, mountNode);

无障碍

组件内置了部分支持无障碍, 但是额外需要开发者手动事情才能完整支持无障碍：给 Rating 传入一个id，就可以支持语音提示当前选择的评分。注意：如果一个页面上有多个 Rating，id 属性一定不能相同。

查看源码在线预览

import { Rating } from '@alifd/next';
const starMap = {
    1: 'Bad',
    2: 'OK',
    3: 'Good',
    4: 'Great',
    5: 'Perfect'
};
ReactDOM.render(<div>
    <Rating
        id="rating-a11y-1"
        defaultValue={3}
        readAs={(val) => starMap[val]}
        onChange={val => console.log('change:', val)}
        onHoverChange={val => console.log('hover:', val)} />
</div>, mountNode);

等级提示

添加 showGrade 属性，使评分组件具有等级提示信息。

查看源码在线预览

import { Rating } from '@alifd/next';
const starMap = {
    1: 'Bad',
    2: 'OK',
    3: 'Good',
    4: 'Great',
    5: 'Perfect'
};
ReactDOM.render(
    <Rating
        defaultValue={2}
        showGrade
        readAs={(val) => starMap[val]}
    />, mountNode);

相关区块

暂无相关区块