Ana içeriğe atla
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.

Adım bileşenleri, sıralı aşamaları görüntüleyerek çok adımlı süreçleri, kılavuzları veya iş akışlarını görselleştirir. Anlamsal HTML ve esnek düzenlerle oluşturulan adımlar, kurulum sihirbazları, öğreticiler ve karmaşık prosedürler aracılığıyla ilerlemeyi gösterir. Frutjam adım sistemi birden fazla boyutu, rengi, yapıyı ve tamamlanma durumunu destekler; form sihirbazları, kurulum kılavuzları ve ilerleme takibi için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
stepsTemelSıralı bir adım listesi için kapsayıcı
stepDeğiştiriciNumaralandırılmış işaretçiye sahip bireysel adım öğesi
steps-horizontalDeğiştiriciYatay düzen (varsayılan)
steps-verticalDeğiştiriciDikey yığılmış düzen
step-primaryRenkBirincil tema renk işaretçisi
step-secondaryRenkİkincil tema renk işaretçisi
step-accentRenkVurgu teması renk işaretçisi
step-neutralRenkNötr tema renk işaretçisi
step-infoRenkBilgi anlamsal renk işaretçisi
step-successRenkBaşarı anlamsal renk işaretçisi
step-warningRenkUyarı anlamsal renk işaretçisi
step-errorRenkHata anlamsal renk işaretçisi

Temel Kullanım

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

Adım Düzeni

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

Adım Renkleri

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

Dikey Adımlar

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

Açıklamalı Adımlar

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

Duyarlı Adımlar

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