11<div align =" center " >
22 <h1 >@rc-component/rate</h1 >
3- <p ><sub >Ant Design 生态的一部分。</sub ></p >
4- <img alt =" Ant Design " height =" 32 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " />
5- <p >⭐ React 评分组件,支持半星、自定义字符、清除和键盘交互。</p >
3+ <p ><sub ><img alt =" Ant Design " height =" 14 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " style =" vertical-align : -0.125em ;" /> Ant Design 生态的一部分。</sub ></p >
4+ <p >📦 ⭐ React 评分组件,支持半星、自定义字符、清除和键盘交互。</p >
65
76 <p >
87 <a href="https://www.npmjs.com/package/@rc-component/rate"><img src="https://img.shields.io/npm/v/@rc-component/rate.svg?style=flat-square" alt="npm version" /></a>
1918
2019## 特性
2120
22- - Controlled and uncontrolled rating values.
23- - Half-star selection, custom characters, and custom character rendering.
24- - Keyboard interaction, focus/blur methods, disabled state, and RTL support.
25- - TypeScript definitions for props and imperative refs.
21+ - 受控和非受控额定值。
22+ - 半星选择、自定义角色和自定义角色渲染。
23+ - 支持键盘交互、焦点/模糊方法、取消状态和RTL。
24+ - props 和命令式引用的 TypeScript 定义。
2625
2726## 安装
2827
@@ -66,36 +65,36 @@ npm start
6665
6766| 名称 | 类型 | 默认值 | 说明 |
6867| --- | --- | --- | --- |
69- | ` allowClear ` | boolean | true | Clear the value when clicking the selected item again. |
70- | ` allowHalf ` | boolean | false | Enable half item selection. |
71- | ` autoFocus ` | boolean | false | Focus the rating on mount. |
72- | ` character ` | ReactNode \| (props: StarProps) => ReactNode | ` '★' ` | Custom character for each item. |
73- | ` characterRender ` | (origin: ReactElement, props: StarProps) => ReactNode | - | Custom renderer for each item. |
74- | ` className ` | string | - | Additional class name. |
75- | ` count ` | number | 5 | Number of rating items. |
76- | ` defaultValue ` | number | 0 | Initial uncontrolled value. |
77- | ` direction ` | string | ` 'ltr' ` | Layout direction. Use ` 'rtl' ` for right-to-left display. |
78- | ` disabled ` | boolean | false | Disable interaction. |
79- | ` id ` | string | - | Root element id. |
80- | ` keyboard ` | boolean | true | Enable keyboard control. |
81- | ` prefixCls ` | string | ` 'rc-rate' ` | Prefix class name. |
82- | ` style ` | React.CSSProperties | - | Root style. |
83- | ` tabIndex ` | number | 0 | Root tab index. |
84- | ` value ` | number | - | Controlled value. |
85- | ` onBlur ` | () => void | - | Blur callback. |
86- | ` onChange ` | (value: number) => void | - | Value change callback. |
87- | ` onFocus ` | () => void | - | Focus callback. |
88- | ` onHoverChange ` | (value: number) => void | - | Hover value callback. |
89- | ` onKeyDown ` | React.KeyboardEventHandler<HTMLUListElement > | - | Keydown callback. |
90- | ` onMouseEnter ` | React.MouseEventHandler<HTMLUListElement > | - | Mouse enter callback. |
91- | ` onMouseLeave ` | React.MouseEventHandler<HTMLUListElement > | - | Mouse leave callback. |
68+ | ` allowClear ` | boolean | true | 再次单击所选项目时清除该值。 |
69+ | ` allowHalf ` | boolean | false | 启用一半项目选择。 |
70+ | ` autoFocus ` | boolean | false | 将评级重点放在安装上。 |
71+ | ` character ` | ReactNode \| (props: StarProps) => ReactNode | ` '★' ` | 每项的自定义字符。 |
72+ | ` characterRender ` | (origin: ReactElement, props: StarProps) => ReactNode | - | 每项的自定义渲染函数。 |
73+ | ` className ` | string | - | 附加className。 |
74+ | ` count ` | number | 5 | 评级项目的数量。 |
75+ | ` defaultValue ` | number | 0 | 初始不受控值。 |
76+ | ` direction ` | string | ` 'ltr' ` | 布局方向。使用 ` 'rtl' ` 从右到左显示。 |
77+ | ` disabled ` | boolean | false | 禁用交互。 |
78+ | ` id ` | string | - | 根元素 ID。 |
79+ | ` keyboard ` | boolean | true | 启用键盘控制。 |
80+ | ` prefixCls ` | string | ` 'rc-rate' ` | 前缀className。 |
81+ | ` style ` | React.CSSProperties | - | 根样式。 |
82+ | ` tabIndex ` | number | 0 | 根选项卡索引。 |
83+ | ` value ` | number | - | 受控值。 |
84+ | ` onBlur ` | () => void | - | 失焦回调。 |
85+ | ` onChange ` | (值:数字) => 无效 | - | 值变化回调。 |
86+ | ` onFocus ` | () => void | - | 聚焦回调。 |
87+ | ` onHoverChange ` | (值:数字) => 无效 | - | 悬浮值回调。 |
88+ | ` onKeyDown ` | React.KeyboardEventHandler<HTMLUListElement > | - | 按键回调。 |
89+ | ` onMouseEnter ` | React.MouseEventHandler<HTMLUListElement > | - | 鼠标进入回调。 |
90+ | ` onMouseLeave ` | React.MouseEventHandler<HTMLUListElement > | - | 鼠标离开回调。 |
9291
9392### Ref
9493
9594| 名称 | 类型 | 说明 |
9695| ------- | ---------- | ----------------------------- |
97- | ` blur ` | () => void | Remove focus from the rating. |
98- | ` focus ` | () => void | Focus the rating. |
96+ | ` blur ` | () => void | 移除评分组件焦点。 |
97+ | ` focus ` | () => void | 聚焦评分组件。 |
9998
10099## 本地开发
101100
@@ -114,8 +113,8 @@ npm run build
114113npm run prepublishOnly
115114```
116115
117- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
116+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
118117
119118## 许可证
120119
121- @rc-component/rate is released under the [ MIT] ( ./LICENSE.md ) license.
120+ @rc-component/rate 基于 [ MIT] ( ./LICENSE.md ) 许可证发布。
0 commit comments