수직 단계
분류: 단계 진행
주문 처리 상태처럼 각 단계마다 설명이 딸린 흐름을 세로 방향으로 보여줄 때 사용하는 패턴입니다. .steps-vertical 클래스를 추가하면 앞서 다룬 수평 단계와 같은 .steps/.step-item 구조를 세로로 쌓아 배치할 수 있습니다. 각 .step-item 안에 제목(.h4)과 보조 설명(.text-secondary)을 함께 넣으면 상태 이력처럼 활용할 수 있고, .steps-counter를 더하면 순번만 간단히 표시하는 형태로도 쓸 수 있습니다.
소스
<div class="card overflow-auto">
<div class="card-body">
<h3 class="card-title">수직 단계</h3>
<ul class="steps steps-vertical m-0 p-0 border-0">
<li class="step-item">
<div class="h4 m-0">주문 접수</div>
<div class="text-secondary">주문이 성공적으로 접수되었습니다. 확인 이메일이 발송됩니다.</div>
</li>
<li class="step-item">
<div class="h4 m-0">처리 중</div>
<div class="text-secondary">주문 상품을 준비하고 있습니다.</div>
</li>
<li class="step-item active">
<div class="h4 m-0">배송 중</div>
<div class="text-secondary">상품이 배송을 위해 출발했습니다.</div>
</li>
<li class="step-item">
<div class="h4 m-0">완료</div>
<div class="text-secondary">주문이 완료되었습니다.</div>
</li>
</ul>
</div>
<div class="card-body">
<ul class="steps steps-counter steps-vertical m-0 p-0 border-0">
<li class="step-item">1단계</li>
<li class="step-item">2단계</li>
<li class="step-item active">3단계</li>
<li class="step-item">4단계</li>
<li class="step-item">5단계</li>
</ul>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
steps | 단계 목록을 진행 표시줄로 렌더링하는 Tabler 컴포넌트 |
steps-vertical | 진행 표시줄을 세로 방향으로 배치 |
steps-counter | 항목에 순번(숫자)을 자동으로 붙임 |
step-item | 진행 표시줄의 각 단계 항목 |
active | 현재 단계임을 표시 |
h4 | 각 단계의 제목 텍스트 크기 |
text-secondary | 각 단계의 보조 설명 문구 색상 |
card, card-body, card-title | 예제를 감싸는 카드 컨테이너와 본문, 제목 영역 |
overflow-auto | 카드 내용이 넘칠 때 스크롤 처리 |
border-0 | 진행 표시줄의 기본 테두리 제거 |
m-0, p-0 | 목록의 기본 바깥/안쪽 여백 제거 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모 듈)를 기동한 뒤 /sample/ui-library/단계-진행-수직-단계.html 경로에서 렌더링 결과를 확인할 수 있습니다.