11<div align =" center " >
22 <h1 >@rc-component/progress</h1 >
3- <p ><sub >Ant Design 生态的一部分。</sub ></p >
4- <img alt =" Ant Design " height =" 32 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " />
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 >
54 <p >📊 React 进度条组件,支持线型、圆形和自定义进度展示。</p >
65
76 <p >
1918
2019## 特性
2120
22- - ` Line ` and ` Circle ` progress components rendered with SVG.
23- - Single value, segmented value, gradient color, and indeterminate loading states.
24- - Semantic ` classNames ` and ` styles ` slots for root, rail, and track customization.
25- - TypeScript definitions for the shared progress props.
21+ - ` Line ` 和 ` Circle ` 使用 SVG 渲染的进度组件。
22+ - 单值、分段值、渐变颜色和不确定的加载状态。
23+ - 用于根、导轨和轨道定制的语义 ` classNames ` 和 ` styles ` 插槽。
24+ - 为共享进度属性提供 TypeScript 类型定义。
2625
2726## 安装
2827
@@ -63,32 +62,32 @@ npm install
6362npm start
6463```
6564
66- Online preview: https://progress.react-component.vercel.app/
65+ 在线预览: https://progress.react-component.vercel.app/
6766
6867## API
6968
70- ` Line ` and ` Circle ` share the same base props.
69+ ` Line ` 和 ` Circle ` 共享相同的基础属性。
7170
7271| 名称 | 类型 | 默认值 | 说明 |
7372| --- | --- | --- | --- |
74- | ` className ` | string | - | Additional class name for the root node. |
75- | ` classNames ` | Partial<Record<'root' \| 'rail' \ | 'track', string >> | - | Semantic class names for internal slots. |
76- | ` gapDegree ` | number | - | Gap degree for circle progress. |
77- | ` gapPosition ` | ` 'top' ` \| ` 'right' ` \| ` 'bottom' ` \| ` 'left' ` | ` 'bottom' ` | Gap position for circle progress. |
78- | ` id ` | string | - | Root element id. |
79- | ` loading ` | boolean | false | Render an indeterminate loading animation. |
80- | ` onClick ` | React.MouseEventHandler | - | Click handler for the root SVG. |
81- | ` percent ` | number \| number[ ] | 0 | Progress percent. Arrays render multiple tracks. |
82- | ` prefixCls ` | string | ` 'rc-progress' ` | Prefix class name. |
73+ | ` className ` | string | - | 根节点的附加className称。 |
74+ | ` classNames ` | 部分<记录<'根' \| '铁路' | '轨道',字符串 >> | - | 内部插槽的语义化 className。 |
75+ | ` gapDegree ` | number | - | 循环进度的差距度。 |
76+ | ` gapPosition ` | ` 'top' ` \| ` 'right' ` \| ` 'bottom' ` \| ` 'left' ` | ` 'bottom' ` | 循环进度的间隙位置。 |
77+ | ` id ` | string | - | 根元素 ID。 |
78+ | ` loading ` | boolean | false | 渲染不确定的加载动画。 |
79+ | ` onClick ` | React.MouseEventHandler | - | 单击根 SVG 的处理程序。 |
80+ | ` percent ` | number \| number[ ] | 0 | 进度百分比。数组会渲染多条轨道。 |
81+ | ` prefixCls ` | string | ` 'rc-progress' ` | 前缀className。 |
8382| ` railColor ` | string | ` '#D9D9D9' ` | Rail color. |
84- | ` railWidth ` | number | 1 | Rail stroke width. |
85- | ` steps ` | number \| { count: number; gap: number } | - | Render progress as discrete steps. |
86- | ` strokeColor ` | string \| Record<string, string \| boolean > \| Array<string \| Record<string, string \| boolean >> | ` '#2db7f5' ` | Track color, gradient object, or per-track colors. |
83+ | ` railWidth ` | number | 1 | 导轨行程宽度。 |
84+ | ` steps ` | 数字 \| { 计数:数量;间隙:数量 } | - | 以离散步骤渲染进度。 |
85+ | ` strokeColor ` | 字符串 \| 记录<字符串,字符串 \| 布尔值 > \| 数组<字符串 \| 记录<字符串,字符串 \| 布尔值 >> | ` '#2db7f5' ` | 轨道颜色、渐变对象或每条轨道的颜色。 |
8786| ` strokeLinecap ` | ` 'round' ` \| ` 'butt' ` \| ` 'square' ` | ` 'round' ` | Stroke line cap. |
88- | ` strokeWidth ` | number | 1 | Track stroke width. |
89- | ` style ` | React.CSSProperties | - | Root style. |
90- | ` styles ` | Partial<Record<'root' \| 'rail' \ | 'track', React.CSSProperties>> | - | Semantic styles for internal slots. |
91- | ` transition ` | string | - | CSS transition for track updates. |
87+ | ` strokeWidth ` | number | 1 | 轨道描边宽度。 |
88+ | ` style ` | React.CSSProperties | - | 根样式。 |
89+ | ` styles ` | 部分<记录<'根' \| '铁路' | 'track', React.CSSProperties>> | - | 内部插槽的语义化样式。 |
90+ | ` transition ` | string | - | 用于跟踪更新的 CSS 过渡。 |
9291
9392## 本地开发
9493
@@ -107,8 +106,8 @@ npm run build
107106npm run prepublishOnly
108107```
109108
110- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
109+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
111110
112111## 许可证
113112
114- @rc-component/progress is released under the [ MIT] ( ./LICENSE.md ) license.
113+ @rc-component/progress 基于 [ MIT] ( ./LICENSE.md ) 许可证发布。
0 commit comments