## Rate 组件示例
### 基本
最简单的用法。
```tsx
import React from 'react';
import { Rate } from 'antd';
const App: React.FC = () => ;
export default App;
```
### 尺寸
三种尺寸。
```tsx
import React from 'react';
import { Flex, Rate } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 半星
支持选中半星。
```tsx
import React from 'react';
import { Rate } from 'antd';
const App: React.FC = () => ;
export default App;
```
### 文案展现
给评分组件加上文案展示。
```tsx
import React, { useState } from 'react';
import { Flex, Rate } from 'antd';
import type { RateProps } from 'antd';
const desc: RateProps['tooltips'] = [
'terrible',
{ placement: 'top', title: 'bad', trigger: 'hover' },
'normal',
'good',
'wonderful',
];
function getDescTitle(value: number, desc: RateProps['tooltips']) {
const item = desc?.[value - 1];
return item && typeof item === 'object' ? item.title : item;
}
const App: React.FC = () => {
const [value, setValue] = useState(3);
return (
{value ? {getDescTitle(value, desc) as React.ReactNode} : null}
);
};
export default App;
```
### 只读
只读，无法进行鼠标交互。
```tsx
import React from 'react';
import { Rate } from 'antd';
const App: React.FC = () => ;
export default App;
```
### 清除
支持允许或者禁用清除。
```tsx
import React from 'react';
import { Flex, Rate } from 'antd';
const App: React.FC = () => (
allowClear: true
allowClear: false
);
export default App;
```
### 其他字符
可以将星星替换为其他字符，比如字母，数字，字体图标甚至中文。
```tsx
import React from 'react';
import { HeartOutlined } from '@ant-design/icons';
import { Flex, Rate } from 'antd';
const App: React.FC = () => (
} allowHalf />
);
export default App;
```
### 自定义字符
可以使用 `(RateProps) => ReactNode` 的方式自定义每一个字符。
```tsx
import React from 'react';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Flex, Rate } from 'antd';
const customIcons: Record = {
1: ,
2: ,
3: ,
4: ,
5: ,
};
const App: React.FC = () => (
index + 1} />
customIcons[index + 1]} />
);
export default App;
```
### 组件 Token
调试使用。
```tsx
import React from 'react';
import { ConfigProvider, Rate } from 'antd';
/** Test usage. Do not use in your production. */
export default () => (
);
```