Passer au contenu principal
Frutjam logo Frutjam
v2.2.5
Theme

Composant Étapes

Dernière mise à jour:

Étapes CSS Tailwind uniquement en CSS pour les assistants en plusieurs étapes et les indicateurs de progression. Disposition horizontale et verticale, variantes de couleurs par étape. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Les composants Étapes visualisent les processus, guides ou flux de travail en plusieurs étapes en affichant des étapes séquentielles. Construites avec du HTML sémantique et des mises en page flexibles, les étapes montrent la progression via des assistants de configuration, des didacticiels et des procédures complexes. Le système d'étapes Frutjam prend en charge plusieurs tailles, couleurs, structures et états d'achèvement, ce qui est idéal pour les assistants de formulaire, les guides d'installation et le suivi des progrès.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
stepsBaseContainer for an ordered list of steps
stepModificateurIndividual step item with a numbered marker
steps-horizontalModificateurDisposition horizontale (par défaut)
steps-verticalModificateurDisposition empilée verticale
step-primaryCouleurPrimary theme color marker
step-secondaryCouleurSecondary theme color marker
step-accentCouleurAccent theme color marker
step-neutralCouleurNeutral theme color marker
step-infoCouleurInfo semantic color marker
step-successCouleurSuccess semantic color marker
step-warningCouleurWarning semantic color marker
step-errorCouleurError semantic color marker

Utilisation de base

  • Shipping
  • Payment
  • Confirmation
1
2
3
4
5
<ul class="steps">
  <li class="step">Shipping</li>
  <li class="step step-primary">Payment</li>
  <li class="step">Confirmation</li>
</ul>

1
2
3
4
5
<ul className="steps">
  <li className="step">Shipping</li>
  <li className="step step-primary">Payment</li>
  <li className="step">Confirmation</li>
</ul>

Steps Layout

  • Step 1
  • Step 2
  • Step 3
html 
1
2
3
4
5
<ul class="steps steps-horizontal">
  <li class="step">Step 1</li>
  <li class="step step-primary">Step 2</li>
  <li class="step">Step 3</li>
</ul>

Step Colors

  • Primary
  • Secondary
  • Accent
  • Info
  • Success
  • Warning
  • Error
html 
1
2
3
4
5
6
7
8
9
<ul class="steps">
  <li class="step step-primary">Primary</li>
  <li class="step step-secondary">Secondary</li>
  <li class="step step-accent">Accent</li>
  <li class="step step-info">Info</li>
  <li class="step step-success">Success</li>
  <li class="step step-warning">Warning</li>
  <li class="step step-error">Error</li>
</ul>

Vertical Steps

  • Account setup
  • Personal info
  • Payment method
  • Confirmation
html 
1
2
3
4
5
6
<ul class="steps steps-vertical">
  <li class="step step-primary">Account setup</li>
  <li class="step step-primary">Personal info</li>
  <li class="step">Payment method</li>
  <li class="step">Confirmation</li>
</ul>

Steps with Description

  • Register
  • Verify Email
  • Choose Plan
  • Complete
Create account
Check your inbox
Select pricing
Get started
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="space-y-4">
  <div>
    <ul class="steps w-full">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Verify Email</li>
      <li class="step">Choose Plan</li>
      <li class="step">Complete</li>
    </ul>
    <div class="grid grid-cols-4 gap-4 mt-4 text-xs text-center">
      <div>Create account</div>
      <div>Check your inbox</div>
      <div>Select pricing</div>
      <div>Get started</div>
    </div>
  </div>
</div>

Responsive Steps

  • Order placed
  • Processing
  • Shipped
  • Delivered
html 
1
2
3
4
5
6
<ul class="steps w-full">
  <li class="step step-primary">Order placed</li>
  <li class="step step-primary">Processing</li>
  <li class="step">Shipped</li>
  <li class="step">Delivered</li>
</ul>

Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Mesures sur demande. Fini les cours hallucinés.

Essayez Cherry MCP