Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Steps Component

CSS-only Tailwind CSS steps for multi-step wizards and progress indicators. Horizontal and vertical layout, color variants per step. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Komponenty kroków wizualizują wieloetapowe procesy, przewodniki lub przepływy pracy, wyświetlając kolejne etapy. Zbudowane z semantycznego kodu HTML i elastycznych układów, kroki pokazują postęp dzięki kreatorom konfiguracji, samouczkom i złożonym procedurom. System kroków Frutjam obsługuje wiele rozmiarów, kolorów, struktur i stanów ukończenia — idealnie nadaje się do kreatorów formularzy, przewodników instalacji i śledzenia postępu.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
stepsOpieraćKontener na uporządkowaną listę kroków
stepModyfikatorIndywidualny element kroku z numerowanym znacznikiem
steps-horizontalModyfikatorUkład poziomy (domyślny)
steps-verticalModyfikatorPionowy układ skumulowany
step-primaryKolorPodstawowy znacznik koloru motywu
step-secondaryKolorDodatkowy znacznik koloru motywu
step-accentKolorMarker koloru motywu akcentującego
step-neutralKolorMarker w neutralnym kolorze motywu
step-infoKolorInformacje semantyczny znacznik koloru
step-successKolorSemantyczny znacznik koloru sukcesu
step-warningKolorOstrzeżenie semantyczny znacznik koloru
step-errorKolorBłąd semantycznego znacznika koloru

Podstawowe użycie

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

Układ kroków

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

Kolory kroków

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

Pionowe stopnie

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

Kroki z opisem

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

Reagujące kroki

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