Progress

Afficher l’achèvement d’une tâche ou le passage du temps avec des barres de progression.

Import

import { Progress } from 'asterui'

Exemples

Progression de base

Barre de progression simple avec valeur.

</>

import { Progress } from 'asterui'

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

export default App

Variantes de couleur

Différents schémas de couleurs pour les barres de progression.

</>

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

Couleurs de statut

Couleurs sémantiques pour différents états.

</>

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

Indéterminé

Barre de progression sans valeur spécifique (animée).

</>

import { Progress } from 'asterui'

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

export default App

Tailles

Contrôler la largeur avec les classes 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

Avec étiquette

Progression avec étiquette de texte.

</>

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

Propriété	Description	Type	Défaut
value	Valeur de progression actuelle (0-100). Omettre pour l’état indéterminé	number	-
max	Valeur maximale	number	100
type	Variante de couleur	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilise l’élément natif <progress> pour l’accessibilité
• La valeur est annoncée par les lecteurs d’écran
• L’état indéterminé est correctement communiqué