Radial Progress 径向进度

具有可自定义外观的圆形进度指示器。

导入

import { RadialProgress } from 'asterui'

示例

基础

带有值的简单径向进度。

</>

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <RadialProgress value={70} />
    )
}

export default App

不同值

具有各种完成百分比的径向进度。

</>

0%

25%

50%

75%

100%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={0} />
        <RadialProgress value={25} />
        <RadialProgress value={50} />
        <RadialProgress value={75} />
        <RadialProgress value={100} />
      </div>
    )
}

export default App

颜色

具有不同颜色的径向进度。

</>

70%

70%

70%

70%

70%

70%

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={70} color="primary" />
        <RadialProgress value={70} color="secondary" />
        <RadialProgress value={70} color="accent" />
        <RadialProgress value={70} color="success" />
        <RadialProgress value={70} color="warning" />
        <RadialProgress value={70} color="error" />
        <RadialProgress value={70} color="info" />
      </div>
    )
}

export default App

自定义尺寸

使用 size 属性调整尺寸。

</>

70%

70%

70%

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 items-center flex-wrap">
        <RadialProgress value={70} size={3} />
        <RadialProgress value={70} size={5} />
        <RadialProgress value={70} size={8} />
        <RadialProgress value={70} size={12} />
      </div>
    )
}

export default App

自定义厚度

调整环的厚度。

</>

70%

70%

70%

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={70} thickness={2} />
        <RadialProgress value={70} thickness={5} />
        <RadialProgress value={70} thickness={10} />
        <RadialProgress value={70} thickness={20} />
      </div>
    )
}

export default App

自定义内容

显示自定义内容而不是百分比。

</>

85/100

60

days

import { RadialProgress } from 'asterui'
import { CheckIcon } from '@aster-ui/icons'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={85}>
          <div className="text-xs">85/100</div>
        </RadialProgress>
        <RadialProgress value={60}>
          <div className="flex flex-col items-center">
            <div className="text-2xl font-bold">60</div>
            <div className="text-xs">days</div>
          </div>
        </RadialProgress>
        <RadialProgress value={100} color="success">
          <CheckIcon size={32} />
        </RadialProgress>
      </div>
    )
}

export default App

不显示值

隐藏百分比文本。

</>

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={30} showValue={false} />
        <RadialProgress value={60} showValue={false} color="primary" />
        <RadialProgress value={90} showValue={false} color="success" />
      </div>
    )
}

export default App

带背景

添加背景和边框样式。

</>

70%

50%

90%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress
          value={70}
          color="primary"
          className="bg-primary text-primary-content border-4 border-primary"
        />
        <RadialProgress
          value={50}
          color="secondary"
          className="bg-secondary text-secondary-content border-4 border-secondary"
        />
        <RadialProgress
          value={90}
          color="accent"
          className="bg-accent text-accent-content border-4 border-accent"
        />
      </div>
    )
}

export default App

API

RadialProgress

属性	描述	类型	默认值
value	进度值(0-100)	number	-
size	以 rem 单位或 CSS 字符串表示的大小	string | number	5rem
thickness	以像素或 CSS 字符串表示的环厚度	string | number	尺寸的 10%
color	进度颜色	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral'	-
showValue	显示百分比文本	boolean	true
children	要显示的自定义内容	React.ReactNode	-
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

可访问性

• 使用带有正确 ARIA 属性的 role="progressbar"
• 值以百分比形式向屏幕阅读器宣布
• 自定义内容可以包含额外的可访问标签