特性

• Line 和 Circle 使用 SVG 渲染的进度组件。
• 单值、分段值、渐变颜色和不确定的加载状态。
• 用于根、导轨和轨道定制的语义 classNames 和 styles 插槽。
• 为共享进度属性提供 TypeScript 类型定义。

安装

npm install @rc-component/progress

使用

import { Circle, Line } from '@rc-component/progress';
export default () => (
  <>
    <Line percent={42} strokeWidth={4} strokeColor="#1677ff" />
    <Circle percent={75} strokeWidth={6} strokeColor="#52c41a" />
  </>
);

import { Circle } from '@rc-component/progress';
export default () => (
  <Circle
    percent={[30, 20, 10]}
    strokeWidth={6}
    strokeColor={['#1677ff', '#52c41a', '#faad14']}
    railWidth={6}
  />
);

SVG 默认作为装饰元素。当 SVG 本身作为进度指示器时，可通过标准 SVG／ARIA 属性提供进度语义和无障碍名称：

<Line
  percent={42}
  role="progressbar"
  aria-label="上传进度"
  aria-valuemin={0}
  aria-valuemax={100}
  aria-valuenow={42}
/>

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Line 和 Circle 共享相同的基础属性。

| 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | className | string | - | 根节点的附加 className。 | | classNames | Partial<Record<'root' | 'rail' | 'track', string>> | - | 内部插槽的语义化 className。 | | gapDegree | number | - | 环形进度缺口角度。 | | gapPosition | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | 循环进度的间隙位置。 | | id | string | - | 根元素 ID。 | | loading | boolean | false | 渲染不确定的加载动画。 | | onClick | React.MouseEventHandler | - | 单击根 SVG 的处理程序。 | | percent | number | number[] | 0 | 进度百分比。数组会渲染多条轨道。 | | prefixCls | string | 'rc-progress' | 前缀 className。 | | railColor | string | '#D9D9D9' | 导轨颜色。 | | railWidth | number | 1 | 导轨行程宽度。 | | steps | number | { count: number; gap: number } | - | 以离散步骤渲染进度。 | | strokeColor | string | Record<string, string | boolean> | Array<string | Record<string, string | boolean>> | '#2db7f5' | 轨道颜色、渐变对象或每条轨道的颜色。 | | strokeLinecap | 'round' | 'butt' | 'square' | 'round' | 描边端点样式。 | | strokeWidth | number | 1 | 轨道描边宽度。 | | style | React.CSSProperties | - | 根样式。 | | styles | Partial<Record<'root' | 'rail' | 'track', React.CSSProperties>> | - | 内部插槽的语义化样式。 | | transition | string | - | 用于跟踪更新的 CSS 过渡。 |

标准 SVG 属性（包括 role 和 aria-*）会透传到根 SVG。

本地开发

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/progress 基于 MIT 许可证发布。