Leaf UI
  • 简体中文

      • Progress 进度条

      展示任务的完成程度。

      基础用法

      交互预览基础用法
      45%
      45%
      basic.tsx
      import { Button, Progress } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function ProgressBasic() {
  const [percent, setPercent] = useState(45);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Progress percent={percent} aria-label="上传进度" />
      <Progress percent={70} status="error" />
      <Progress percent={100} />
      <Progress indeterminate aria-label="加载进度" />
      <div className="leaf-demo-row">
        <Progress percent={percent} type="circle" aria-label="项目进度" />
        <Progress percent={100} type="circle" size={80} />
        <Progress percent={60} type="circle" status="error" size={80} />
      </div>
      <div className="leaf-demo-row">
        <Button
          variant="outline"
          disabled={percent === 0}
          onClick={() => setPercent(Math.max(0, percent - 10))}
        >
          减少
        </Button>
        <Button disabled={percent === 100} onClick={() => setPercent(Math.min(100, percent + 10))}>
          增加
        </Button>
      </div>
    </div>
  );
}

      Progress API

      属性类型默认值说明
      percentnumber0完成百分比，范围 0–100
      type'line' | 'circle''line'直线或圆形进度
      status'normal' | 'success' | 'error''normal'进度状态
      showInfobooleantrue展示百分比或状态图标
      format(percent: number) => ReactNode—自定义进度文字
      strokeWidthnumber8 / 6进度线宽；直线为像素，圆形为视图单位
      colorstring—自定义进度颜色
      sizenumber100圆形宽高，单位像素
      indeterminatebooleanfalse总进度未知时展示加载动画，不显示百分比
      trailColorstring—底轨颜色

      类型

      定义组件属性或组装列表时可导入相关类型。

      import type { ProgressProps } from '@sudden3/leaf-ui';

      使用说明

      达到 100% 时自动使用成功状态。aria-label 可描述具体任务，如“上传进度”；进度本身也会提供给辅助技术。