Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần bước

Cập nhật lần cuối:

Các bước CSS Tailwind chỉ dành cho CSS dành cho trình hướng dẫn nhiều bước và chỉ báo tiến trình. Bố cục ngang và dọc, các biến thể màu sắc trên mỗi bước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

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

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

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

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

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ả

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

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 cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp bước chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP