메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

단계 구성 요소

마지막 업데이트:

다단계 마법사 및 진행률 표시기를 위한 CSS 전용 Tailwind CSS 단계입니다. 수평 및 수직 레이아웃, 단계당 색상 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

단계 구성 요소는 순차적 단계를 표시하여 다단계 프로세스, 가이드 또는 워크플로를 시각화합니다. 시맨틱 HTML과 유연한 레이아웃으로 구축된 단계에서는 설정 마법사, 튜토리얼 및 복잡한 절차를 통해 진행 상황을 보여줍니다. Frutjam 단계 시스템은 다양한 크기, 색상, 구조 및 완료 상태를 지원하므로 양식 마법사, 설치 안내서 및 진행 상황 추적에 이상적입니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업 유형 설명
steps베이스순서가 지정된 단계 목록을 위한 컨테이너
step수정자숫자 표시가 있는 개별 단계 항목
steps-horizontal수정자가로 레이아웃(기본값)
steps-vertical수정자수직 스택 레이아웃
step-primary색상기본 테마 색상 마커
step-secondary색상보조 테마 색상 표시자
step-accent색상악센트 테마 색상 마커
step-neutral색상중립 테마 색상 마커
step-info색상정보 의미 색상 마커
step-success색상성공 의미 색상 마커
step-warning색상경고 의미 색상 마커
step-error색상오류 의미 색상 마커

기본 사용법

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>

단계 레이아웃

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>

단계 색상

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>

수직 단계

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>

설명이 포함된 단계

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>

대응 단계

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를 사용해 보세요