Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen Langkah

Terakhir diperbarui:

Langkah-langkah Tailwind CSS khusus CSS untuk panduan multi-langkah dan indikator kemajuan. Tata letak horizontal dan vertikal, varian warna per langkah. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Komponen langkah memvisualisasikan proses multi-langkah, panduan, atau alur kerja dengan menampilkan tahapan berurutan. Dibangun dengan HTML semantik dan tata letak yang fleksibel, langkah-langkah menunjukkan kemajuan melalui panduan pengaturan, tutorial, dan prosedur yang rumit. Sistem langkah Frutjam mendukung berbagai ukuran, warna, struktur, dan status penyelesaian—ideal untuk penyihir formulir, panduan instalasi, dan pelacakan kemajuan.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
stepsBasisWadah untuk daftar langkah yang diurutkan
stepPengubahItem langkah individual dengan penanda bernomor
steps-horizontalPengubahTata letak horizontal (default)
steps-verticalPengubahTata letak bertumpuk vertikal
step-primaryWarnaPenanda warna tema utama
step-secondaryWarnaPenanda warna tema sekunder
step-accentWarnaPenanda warna tema aksen
step-neutralWarnaPenanda warna tema netral
step-infoWarnaInfo penanda warna semantik
step-successWarnaPenanda warna semantik sukses
step-warningWarnaPeringatan penanda warna semantik
step-errorWarnaKesalahan penanda warna semantik

Penggunaan Dasar

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>

Tata Letak Langkah

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>

Warna Langkah

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>

Langkah Vertikal

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>

Langkah-langkah dengan Deskripsi

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>

Langkah Responsif

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Tangga yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP