进度条

线性进度指示器，用于展示任务的完成百分比。支持静态值、带标签和动态更新三种用法。

安装

bash

npx polyui add progress

基础

tsx

import { Progress } from "@polyui/react/progress"
export function ProgressBasic() {
  return (
    <div className="flex flex-col gap-4 w-full max-w-sm">
      <Progress value={25} />
      <Progress value={50} />
      <Progress value={75} />
      <Progress value={100} />
    </div>
  )
}

不同值

tsx

import { Progress } from "@polyui/react/progress"
export function ProgressDifferentValues() {
  return (
    <div className="flex flex-col gap-4 w-full max-w-sm">
      <Progress value={0} />
      <Progress value={25} />
      <Progress value={50} />
      <Progress value={75} />
      <Progress value={100} />
    </div>
  )
}

带标签

Step 1100%

Step 260%

Step 320%

tsx

import { Progress } from "@polyui/react/progress"
export function ProgressWithLabel() {
  const steps = [
    { label: "Step 1", value: 100 },
    { label: "Step 2", value: 60 },
    { label: "Step 3", value: 20 },
  ]

  return (
    <div className="flex flex-col gap-5 w-full max-w-sm">
      {steps.map((step) => (
        <div key={step.label}>
          <div className="flex justify-between mb-1.5 text-sm">
            <span>{step.label}</span>
            <span className="text-muted-foreground">{step.value}%</span>
          </div>
          <Progress value={step.value} />
        </div>
      ))}
    </div>
  )
}

属性

属性	类型	默认值	说明
`value`	`number`	`0`	当前进度值，范围 0 到 max。
`max`	`number`	`100`	最大进度值，默认为 100。
`className`	`string`	`—`	自定义样式类名。