Rating 评分

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

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

API

评分

代码示例

基本

最简单的用法。

查看源码在线预览

import { Rating } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Rating defaultValue={3.2} onChange={val => console.log(val)} />
  </div>,
  mountNode
);

只读模式

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

查看源码在线预览

import { Rating } from "@icedesign/base";
ReactDOM.render(<Rating defaultValue={3.2} disabled />, mountNode);

等级提示

设置 type 属性取值为 grade，使评分组件具有等级提示信息。

查看源码在线预览

import { Rating } from "@icedesign/base";
ReactDOM.render(<Rating defaultValue={2} type="grade" />, mountNode);

半星评分

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

查看源码在线预览

import { Rating } from "@icedesign/base";
ReactDOM.render(<Rating defaultValue={3.2} allowHalf />, mountNode);

显示文案

评分组件提供了 showInfo 属性，它支持传入一个函数来返回组件展示的文案信息。

查看源码在线预览

import { Rating } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Rating
      defaultValue={3.2}
      onChange={val => console.log(val)}
      showInfo={val => val}
    />
  </div>,
  mountNode
);

尺寸

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

查看源码在线预览

import { Rating } from "@icedesign/base";
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
);

相关区块

暂无相关区块