Radial Progress

Indicateur de progression circulaire avec une apparence personnalisable.

Import

import { RadialProgress } from 'asterui'

Exemples

Basique

Progression radiale simple avec valeur.

</>

70%

import { RadialProgress } from 'asterui'

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

export default App

Différentes valeurs

Progression radiale avec divers pourcentages de complétion.

</>

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

Couleurs

Progression radiale avec différentes couleurs.

</>

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

Taille personnalisée

Ajustez la taille en utilisant la propriété 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

Épaisseur personnalisée

Ajustez l'épaisseur de l'anneau.

</>

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

Contenu personnalisé

Affichez un contenu personnalisé au lieu du pourcentage.

</>

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

Sans affichage de valeur

Masquez le texte du pourcentage.

</>

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

Avec arrière-plan

Ajoutez un arrière-plan et un style de bordure.

</>

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

Propriété	Description	Type	Défaut
value	Valeur de progression (0-100)	number	-
size	Taille en unités rem ou chaîne CSS	string | number	5rem
thickness	Épaisseur de l’anneau en pixels ou chaîne CSS	string | number	10% de la taille
color	Couleur de progression	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral'	-
showValue	Afficher le texte du pourcentage	boolean	true
children	Contenu personnalisé à afficher	React.ReactNode	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Utilise role="progressbar" avec les attributs ARIA appropriés
• La valeur est annoncée en pourcentage aux lecteurs d’écran
• Le contenu personnalisé peut inclure des étiquettes accessibles supplémentaires