Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Adımlar Bileşeni

Son güncelleme:

Çok adımlı sihirbazlar ve ilerleme göstergeleri için yalnızca CSS Tailwind CSS adımları. Yatay ve dikey düzen, adım başına renk çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

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

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

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

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

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

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

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>

Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam Adımlar sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin