Étapes

Indicateur de progression visuel montrant des étapes séquentielles.

Importation

import { Steps } from 'asterui'

Exemples

Étapes de base

Progression horizontale des étapes.

</>

• Register
• Choose plan
• Purchase
• Receive Product

import { Steps } from 'asterui'

function App() {
  return (
      <Steps>
        <Steps.Step color="primary">Register</Steps.Step>
        <Steps.Step color="primary">Choose plan</Steps.Step>
        <Steps.Step>Purchase</Steps.Step>
        <Steps.Step>Receive Product</Steps.Step>
      </Steps>
    )
}

export default App

Étapes verticales

Étapes en orientation verticale.

</>

• Register
• Choose plan
• Purchase
• Receive Product

import { Steps } from 'asterui'

function App() {
  return (
      <Steps direction="vertical">
        <Steps.Step color="primary">Register</Steps.Step>
        <Steps.Step color="primary">Choose plan</Steps.Step>
        <Steps.Step>Purchase</Steps.Step>
        <Steps.Step>Receive Product</Steps.Step>
      </Steps>
    )
}

export default App

Différentes couleurs

Étapes avec diverses couleurs sémantiques.

</>

• Research
• Design
• Develop
• Deploy

import { Steps } from 'asterui'

function App() {
  return (
      <Steps>
        <Steps.Step color="info">Research</Steps.Step>
        <Steps.Step color="info">Design</Steps.Step>
        <Steps.Step color="warning">Develop</Steps.Step>
        <Steps.Step color="success">Deploy</Steps.Step>
      </Steps>
    )
}

export default App

Contenu personnalisé

Indicateurs personnalisés utilisant dataContent.

</>

• Step 1
• Step 2
• Step 3
• Step 4

import { Steps } from 'asterui'

function App() {
  return (
      <Steps>
        <Steps.Step color="primary" dataContent="?">Step 1</Steps.Step>
        <Steps.Step color="primary" dataContent="!">Step 2</Steps.Step>
        <Steps.Step dataContent="✓">Step 3</Steps.Step>
        <Steps.Step dataContent="✕">Step 4</Steps.Step>
      </Steps>
    )
}

export default App

Disposition responsive

Verticale sur mobile, horizontale sur ordinateur.

</>

• Register
• Choose plan
• Purchase
• Receive Product

import { Steps } from 'asterui'

function App() {
  return (
      <Steps className="steps-vertical lg:steps-horizontal">
        <Steps.Step color="primary">Register</Steps.Step>
        <Steps.Step color="primary">Choose plan</Steps.Step>
        <Steps.Step>Purchase</Steps.Step>
        <Steps.Step>Receive Product</Steps.Step>
      </Steps>
    )
}

export default App

Étape actuelle contrôlée

Utiliser la propriété current pour contrôler la progression.

</>

• Register
• Verify Email
• Setup Profile
• Complete

PreviousNext

import { Steps, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <div className="space-y-4">
        <Steps current={current}>
          <Steps.Step>Register</Steps.Step>
          <Steps.Step>Verify Email</Steps.Step>
          <Steps.Step>Setup Profile</Steps.Step>
          <Steps.Step>Complete</Steps.Step>
        </Steps>
        <div className="flex gap-2">
          <Button size="sm" onClick={() => setCurrent(Math.max(0, current - 1))} disabled={current === 0}>
            Previous
          </Button>
          <Button size="sm" color="primary" onClick={() => setCurrent(Math.min(3, current + 1))} disabled={current === 3}>
            Next
          </Button>
        </div>
      </div>
    )
}

export default App

Modèle piloté par les données

Utiliser la propriété items pour des étapes pilotées par les données avec navigation au clic.

</>

• Cart
• Address
• Payment
• Confirm

import { Steps, notification } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  const items = [
    { key: 'cart', title: 'Cart' },
    { key: 'address', title: 'Address' },
    { key: 'payment', title: 'Payment' },
    { key: 'confirm', title: 'Confirm' },
  ];
  
  return (
      <Steps
        items={items}
        current={current}
        onChange={(step) => {
          setCurrent(step);
          notification.info({ message: `Navigated to step ${step + 1}` });
        }}
      />
    )
}

export default App

Avec icônes

Étapes avec icônes personnalisées.

</>

• Order Placed
• Processing
• Payment
• Delivery

import { Steps } from 'asterui'
import { CheckIcon, DocumentTextIcon, CreditCardIcon, TruckIcon } from '@aster-ui/icons'

function App() {
  return (
      <Steps>
        <Steps.Step color="primary" icon={<CheckIcon size="sm" />}>
          Order Placed
        </Steps.Step>
        <Steps.Step color="primary" icon={<DocumentTextIcon size="sm" />}>
          Processing
        </Steps.Step>
        <Steps.Step icon={<CreditCardIcon size="sm" />}>
          Payment
        </Steps.Step>
        <Steps.Step icon={<TruckIcon size="sm" />}>
          Delivery
        </Steps.Step>
      </Steps>
    )
}

export default App

API

Steps

Propriété	Description	Type	Défaut
children	Éléments d’étapes (modèle composé)	React.ReactNode	-
items	Éléments d’étapes (modèle piloté par les données)	StepItem[]	-
current	Index de l’étape actuelle (commence à 0)	number	-
direction	Direction de la disposition	'horizontal' | 'vertical'	'horizontal'
vertical	Disposition verticale (obsolète, utiliser direction)	boolean	false
onChange	Callback lorsqu’une étape est cliquée	(current: number) => void	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

StepItem (pour la propriété items)

Propriété	Description	Type	Défaut
key	Identifiant unique	string	-
title	Titre de l’étape	React.ReactNode	-
description	Description de l’étape	React.ReactNode	-
icon	Icône de l’étape	React.ReactNode	-
color	Couleur de l’étape	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	Si l’étape est désactivée	boolean	false
data-testid	ID de test pour les tests	string	-

Steps.Step (modèle composé)

Propriété	Description	Type	Défaut
children	Contenu de l’étape	React.ReactNode	-
title	Titre de l’étape (alternative à children)	React.ReactNode	-
description	Description de l’étape	React.ReactNode	-
icon	Icône de l’étape	React.ReactNode	-
color	Couleur de l’étape	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
dataContent	Contenu personnalisé pour l’indicateur d’étape	string	-
disabled	Si l’étape est désactivée	boolean	false
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

Conseils d’utilisation :

• Utilisez la propriété current pour contrôler quelle étape est active
• Les étapes avant current sont automatiquement marquées comme terminées
• Utilisez onChange pour activer le clic sur les étapes pour la navigation
• Utilisez des classes responsive pour des mises en page adaptées aux mobiles