Statut

Petit point indicateur pour afficher le statut comme en ligne, hors ligne, erreur, etc.

Importation

import { Status } from 'asterui'

Exemples

Basique

Indicateurs de statut simples pour différents états.

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="md">
        <Status type="success" />
        <Status type="warning" />
        <Status type="error" />
        <Status type="info" />
      </Space>
    )
}

export default App

Tailles

Variantes de tailles disponibles.

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="md" align="center">
        <Status type="primary" size="xs" />
        <Status type="primary" size="sm" />
        <Status type="primary" size="md" />
        <Status type="primary" size="lg" />
        <Status type="primary" size="xl" />
      </Space>
    )
}

export default App

Animé

Effets d'animation ping et rebond.

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="lg" align="center">
        <Status type="error" ping />
        <Status type="success" ping />
        <Status type="info" bounce />
      </Space>
    )
}

export default App

Toutes les couleurs

Tous les types de couleurs disponibles.

</>

import { Status, Space } from 'asterui'

function App() {
  return (
      <Space size="md">
        <Status type="neutral" />
        <Status type="primary" />
        <Status type="secondary" />
        <Status type="accent" />
        <Status type="info" />
        <Status type="success" />
        <Status type="warning" />
        <Status type="error" />
      </Space>
    )
}

export default App

API

Propriété	Description	Type	Défaut
type	Type de couleur du statut	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	'neutral'
size	Taille du statut	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
ping	Effet d’animation ping	boolean	false
bounce	Effet d’animation rebond	boolean	false
label	Label d’accessibilité	string	-
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilisez la propriété label pour fournir un nom accessible
• Envisagez d’associer du texte pour les utilisateurs de lecteurs d’écran
• L’animation ping attire l’attention sur les changements de statut importants