Rate component
npm install @uiw/react-rateRate 评分
===
评分组件
``jsx`
import { Rate } from 'uiw';
// or
import Rate from '@uiw/react-rate';
按钮样式的单选组合。
`jsx mdx:preview&bg=#fff
import React from 'react';
import { Rate, Divider, Icon } from 'uiw';
export default function Demo() {
return (
$3
表单中应用 组件`jsx mdx:preview&bg=#fff
import React from 'react';
import { Form, Row, Col, Icon, Rate, Button, Notify } from 'uiw';export default function Demo() {
return (
onSubmitError={(error) => {
if (error.filed) {
return { ...error.filed };
}
return null;
}}
onSubmit={({initial, current}) => {
const errorObj = {};
if (current.rate < 2) {
errorObj.rate = '评分低于 2 拒绝提交评分！';
}
if(Object.keys(errorObj).length > 0) {
const err = new Error();
err.filed = errorObj;
Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });
throw err;
}
Notify.success({
title: '提交成功！',
description: 表单提交成功，选择值为：${current.rate}！,
});
}}
fields={{
rate: {
initialValue: 3,
children:
},
}}
>
{({ fields, state, canSubmit }) => {
return (
|
|
{JSON.stringify(state.current, null, 2)}
|
)
}}
)
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Rate, Divider, Icon, RadioGroup, Radio } from 'uiw';export default function Demo() {
const [value, setValue] = React.useState(4);
return (
{
setValue(e.target.value);
}}>
选择 0 星
选择 1 星
选择 2 星
选择 3 星
)
}
`$3
按钮样式的单选组合。
jsx mdx:preview&bg=#fff
import React from 'react';
import { Rate, Divider, Icon } from 'uiw';export default function Demo() {
return (
);
}
`$3
按钮样式的单选组合。
jsx mdx:preview&bg=#fff
import React from 'react';
import { Rate, Divider } from 'uiw';export default function Demo() {
return (
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Rate, Divider, Icon } from 'uiw';export default function Demo() {
return (
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Rate, Divider, Icon } from 'uiw';export default function Demo() {
return (
)
}
`Rate
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| value | 根据 value 进行比较，判断是否选中 | Number | - |
| count | star 总数 | Number |
|
| readOnly | 只读，无法进行交互 | Boolean | false |
| allowHalf | 是否允许半选 | Boolean | false` |