如何引入
基本用法
半星
只读
点击清除
文案展现
自定义
API参考
Accessibility
设计变量
输入类 · Rating
评分
展示评分的组件
API 文档
设计文档
代码演示
如何引入
import { Rating } from '@douyinfe/semi-ui';
基本用法
最简单的用法，支持两种尺寸
default
，
small
。
支持传入 number 类型自定义尺寸。具体可以参考
自定义
import React from 'react';
import { Rating } from '@douyinfe/semi-ui';
() => (
<Rating defaultValue={5}/>
<Rating size='small' defaultValue={5}/>
半星
通过设置
allowHalf
属性可以支持选择半星。
allowHalf
属性支持
展示
除0.5以外的小数。
import React from 'react';
import { Rating } from '@douyinfe/semi-ui';
() => (
<Rating allowHalf defaultValue={3.5}/>
<Rating allowHalf defaultValue={3.65} disabled/>
只读
通过设置
disabled
属性将无法进行交互。
import React from 'react';
import { Rating } from '@douyinfe/semi-ui';
() => (
<Rating disabled defaultValue={3} />
点击清除
通过设置
allowClear
属性允许再次点击时清除数值，默认为
true
。
import React from 'react';
import { Rating } from '@douyinfe/semi-ui';
() => (
<span>允许再次点击清除</span>
<Rating allowClear={true} defaultValue={3}/>
<span>禁止再次点击清除</span>
<Rating allowClear={false} defaultValue={3}/>
文案展现
给评分组件加上文案展示。
import React, { useState } from 'react';
import { Rating } from '@douyinfe/semi-ui';
() => {
const [value, setValue] = useState(0);
const change = (val) => setValue(val);
const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
return (
<span>How was the help you received:
{value ? <span>{desc[value - 1]}</span> : ''}
</span>
<Rating tooltips={desc} onChange={change} value={value} />
自定义
自定义评分字符、个数及尺寸。
自定义尺寸需要配合自定义的字符才能生效。
自定义尺寸需要配合自定义的字符才能生效。
import React from 'react';
import { Rating } from '@douyinfe/semi-ui';
import { IconLikeHeart } from '@douyinfe/semi-icons';
() => (
<Rating style={{ color: 'red' }} character={(<IconLikeHeart size="extra-large" />)} defaultValue={3}/>
<Rating style={{ color: 'red' }} size={48} allowHalf character={(<IconLikeHeart style={{ fontSize: 48 }} />)} defaultValue={3}/>
<Rating character={'赞'} size={18} defaultValue={3}/>