Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Schritte-Komponente

Zuletzt aktualisiert:

Nur CSS Tailwind CSS-Schritte für mehrstufige Assistenten und Fortschrittsanzeigen. Horizontales und vertikales Layout, Farbvarianten pro Schritt. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Schrittkomponenten visualisieren mehrstufige Prozesse, Anleitungen oder Arbeitsabläufe, indem sie aufeinanderfolgende Phasen anzeigen. Die mit semantischem HTML und flexiblen Layouts erstellten Schritte zeigen den Fortschritt durch Einrichtungsassistenten, Tutorials und komplexe Verfahren an. Das Frutjam-Schrittesystem unterstützt mehrere Größen, Farben, Strukturen und Fertigstellungsstatus – ideal für Formularassistenten, Installationsanleitungen und Fortschrittsverfolgung.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
stepsBaseContainer für eine geordnete Liste von Schritten
stepModifikatorEinzelnes Schrittelement mit einer nummerierten Markierung
steps-horizontalModifikatorHorizontales Layout (Standard)
steps-verticalModifikatorVertikal gestapeltes Layout
step-primaryFarbeFarbmarkierung für das Hauptthema
step-secondaryFarbeFarbmarkierung für sekundäres Thema
step-accentFarbeFarbmarkierung für Akzentthemen
step-neutralFarbeNeutraler Themenfarbmarker
step-infoFarbeInfo-semantischer Farbmarker
step-successFarbeErfolgssemantischer Farbmarker
step-warningFarbeSemantischer Warnfarbmarker
step-errorFarbeFehlersemantischer Farbmarker

Grundlegende Verwendung

  • 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>

Stufenlayout

  • 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>

Schrittfarben

  • 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>

Vertikale Schritte

  • 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>

Schritte mit Beschreibung

  • 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>

Reaktionsfähige Schritte

  • 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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Schritte-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP