수평 단계
분류: 단계 진행
여러 단계로 이어지는 작업(장바구니 → 결제 → 확인 같은 흐름)의 현재 위치를 가로 방향으로 안내할 때 사용하는 패턴입니다. .steps 안에 .step-item을 나열하면 되고, active 클래스가 붙은 항목이 현재 단계로 강조됩니다. 번호만 표시하려면 .steps-counter를 추가하고, 항목 안에 텍스트를 채우면 자동으로 번호 대신 그 내용이 보이는 방식입니다. .steps-green처럼 .steps-{색상} 클래스로 진행 표시 색을 바꿀 수 있습니다.
같은 문서 안에 마크업으로 함께 둔 .breadcrumb(breadcrumb-arrows, breadcrumb-muted)는 단계와는 별개인 경 로 탐색(Breadcrumb) 컴포넌트이지만, 순번이 있는 화면 흐름을 화살표형 목록으로 표현하고 싶을 때 .steps의 대안으로도 종종 활용됩니다.
소스
<div class="card overflow-auto">
<div class="card-body">
<h3 class="card-title">수평 단계</h3>
<ul class="steps steps-green m-0 p-0 border-0">
<li class="step-item">1</li>
<li class="step-item active">2</li>
<li class="step-item">3</li>
</ul>
</div>
<div class="card-body">
<ul class="steps steps-green steps-counter m-0 p-0 border-0">
<li class="step-item"></li>
<li class="step-item active"></li>
<li class="step-item"></li>
</ul>
</div>
<div class="card-body">
<ul class="steps steps-green steps-counter m-0 p-0 border-0">
<li class="step-item">장바구니</li>
<li class="step-item active">결제 정보</li>
<li class="step-item">확인</li>
</ul>
</div>
<div class="card-body">
<ol class="breadcrumb breadcrumb-arrows">
<li class="breadcrumb-item"><a href="#">1단계</a></li>
<li class="breadcrumb-item active"><a href="#">2단계</a></li>
<li class="breadcrumb-item disabled"><a href="#">3단계</a></li>
<li class="breadcrumb-item disabled"><a href="#">4단계</a></li>
</ol>
</div>
<div class="card-body">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">1. 1단계</a></li>
<li class="breadcrumb-item"><a href="#">2. 2단계</a></li>
<li class="breadcrumb-item active"><a href="#">3. 3단계</a></li>
<li class="breadcrumb-item disabled"><a href="#">4. 4단계</a></li>
<li class="breadcrumb-item disabled"><a href="#">5. 5단계</a></li>
</ol>
</div>
<div class="card-body">
<ol class="breadcrumb breadcrumb-muted">
<li class="breadcrumb-item"><a href="#">1. 1단계</a></li>
<li class="breadcrumb-item"><a href="#">2. 2단계</a></li>
<li class="breadcrumb-item active"><a href="#">3. 3단계</a></li>
<li class="breadcrumb-item disabled"><a href="#">4. 4단계</a></li>
<li class="breadcrumb-item disabled"><a href="#">5. 5단계</a></li>
</ol>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
steps | 단계 목록(<ul>/<ol>)을 가로 진행 표시줄로 렌더링하는 Tabler 컴포넌트 |
step-item | 진행 표시줄의 각 단계 항목 |
steps-counter | 항목에 순번(숫자)을 자동으로 붙임 |
steps-green | 진행 표시줄의 강조 색을 초록으로 지정 (.steps-{color}) |
active | 현재 단계(또는 현재 breadcrumb 위치)임을 표시 |
disabled | 아직 진입할 수 없는 단계로 비활성 처리 |
breadcrumb | 경로 탐색 목록의 기본 컴포넌트 |
breadcrumb-arrows | breadcrumb 항목을 화살표 모양으로 표시 |
breadcrumb-muted | breadcrumb 색을 옅게(muted) 표시 |
breadcrumb-item | breadcrumb의 각 항목 |
card, card-body, card-title | 예제를 감싸는 카드 컨테이너와 본문, 제목 영역 |
overflow-auto | 카드 내용이 넘칠 때 스크롤 처리 |
border-0 | 진행 표시줄의 기본 테두리 제거 |
m-0, p-0 | 목록의 기본 바깥/안쪽 여백 제거 |
실전 예제 페이지
HandStack 웹 호스 트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/단계-진행-수평-단계.html 경로에서 렌더링 결과를 확인할 수 있습니다.