Progress 进度条

使用进度条显示任务完成或时间流逝。

导入

import { Progress } from 'asterui'

示例

基础进度条

带有值的简单进度条。

</>

import { Progress } from 'asterui'

function App() {
  return (
      <Progress value={70} className="w-56" />
    )
}

export default App

颜色变体

进度条的不同配色方案。

</>

import { Progress } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <Progress value={20} className="w-56" />
        <Progress type="primary" value={40} className="w-56" />
        <Progress type="secondary" value={60} className="w-56" />
        <Progress type="accent" value={80} className="w-56" />
      </div>
    )
}

export default App

状态颜色

不同状态的语义颜色。

</>

import { Progress } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <Progress type="info" value={40} className="w-56" />
        <Progress type="success" value={60} className="w-56" />
        <Progress type="warning" value={80} className="w-56" />
        <Progress type="error" value={100} className="w-56" />
      </div>
    )
}

export default App

不确定

没有特定值的进度条(动画)。

</>

import { Progress } from 'asterui'

function App() {
  return (
      <Progress className="w-56" />
    )
}

export default App

尺寸

使用 Tailwind 类控制宽度。

</>

import { Progress } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <Progress type="primary" value={70} className="w-32" />
        <Progress type="primary" value={70} className="w-56" />
        <Progress type="primary" value={70} className="w-full" />
      </div>
    )
}

export default App

带标签

带有文本标签的进度。

</>

Uploading...75%

import { Progress } from 'asterui'

function App() {
  return (
      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Uploading...</span>
          <span>75%</span>
        </div>
        <Progress type="primary" value={75} className="w-full" />
      </div>
    )
}

export default App

API

Progress

属性	描述	类型	默认值
value	当前进度值(0-100)。省略以获得不确定状态	number	-
max	最大值	number	100
type	颜色变体	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
className	额外的 CSS 类	string	-

可访问性

• 使用原生 <progress> 元素以获得可访问性
• 值由屏幕阅读器宣布
• 不确定状态得到正确传达