跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

步骤组件

最后更新:

仅 CSS Tailwind CSS 步骤用于多步骤向导和进度指示器。水平和垂直布局，每个步骤的颜色变化。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

步骤组件通过显示连续阶段来可视化多步骤流程、指南或工作流程。步骤采用语义 HTML 和灵活的布局构建，通过设置向导、教程和复杂的过程显示进度。 Frutjam 步骤系统支持多种尺寸、颜色、结构和完成状态，非常适合表单向导、安装指南和进度跟踪。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
steps根据有序步骤列表的容器
step修饰符带有编号标记的单个步骤项目
steps-horizontal修饰符Horizontal layout (default)
steps-vertical修饰符垂直堆叠布局
step-primary颜色主要主题颜色标记
step-secondary颜色次要主题颜色标记
step-accent颜色强调主题颜色标记
step-neutral颜色中性主题颜色标记
step-info颜色信息语义颜色标记
step-success颜色成功语义颜色标记
step-warning颜色警告语义颜色标记
step-error颜色错误语义颜色标记

基本用法

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

步骤布局

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

阶梯颜色

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

垂直台阶

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

步骤及说明

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

响应步骤

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

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 步骤 类名称和结构。不再有幻觉课程。

尝试Cherry MCP