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

Składnik kroków

Ostatnia aktualizacja:

Tylko CSS Kroki CSS Tailwind dla wieloetapowych kreatorów i wskaźników postępu. Układ poziomy i pionowy, warianty kolorystyczne na stopień. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

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

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

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

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

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

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

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>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Kroki. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP