Chuyển đến nội dung chính
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.

Các thành phần bước trực quan hóa các quy trình, hướng dẫn hoặc quy trình công việc gồm nhiều bước bằng cách hiển thị các giai đoạn tuần tự. Được xây dựng bằng HTML ngữ nghĩa và bố cục linh hoạt, các bước hiển thị tiến trình thông qua trình hướng dẫn thiết lập, hướng dẫn và quy trình phức tạp. Hệ thống các bước Frutjam hỗ trợ nhiều kích thước, màu sắc, cấu trúc và trạng thái hoàn thành—lý tưởng cho trình hướng dẫn biểu mẫu, hướng dẫn cài đặt và theo dõi tiến trình.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
stepsCăn cứVùng chứa danh sách các bước được sắp xếp
stepCông cụ sửa đổiMục bước riêng lẻ có điểm đánh dấu được đánh số
steps-horizontalCông cụ sửa đổiBố cục ngang (mặc định)
steps-verticalCông cụ sửa đổiBố cục xếp chồng theo chiều dọc
step-primaryMàu sắcĐiểm đánh dấu màu chủ đề chính
step-secondaryMàu sắcĐiểm đánh dấu màu chủ đề phụ
step-accentMàu sắcĐiểm đánh dấu màu chủ đề nhấn
step-neutralMàu sắcĐiểm đánh dấu màu chủ đề trung tính
step-infoMàu sắcĐiểm đánh dấu màu ngữ nghĩa thông tin
step-successMàu sắcĐánh dấu màu ngữ nghĩa thành công
step-warningMàu sắcCảnh báo đánh dấu màu ngữ nghĩa
step-errorMàu sắcLỗi đánh dấu màu ngữ nghĩa

Cách sử dụng cơ bản

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

Bố cục các bước

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

Màu sắc bước

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

Bước dọc

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

Các bước với mô tả

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

Các bước đáp ứng

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