KRDS Angular

단계 표시기 Step indicator ​

단계 표시기는 서비스 이용을 위해 사용자가 거쳐야 하는 일련의 단계를 시각화하여 표현한 것으로 진행 상태에 대한 피드백을 사용자에게 전달한다.

KRDS 가이드

기본 ​

<ol krdsStepIndicator> 안에 단계마다 <li krdsStep>을 넣고, 단계 번호는 step, 단계 제목은 내용으로 씁니다. current에 현재 단계의 위치(0부터)를 주면 그보다 앞의 단계는 완료(done), 뒤의 단계는 대기(pending)로 표시하고, 현재 단계에는 화면낭독기용 "현재단계"를 붙입니다. 단계를 @if·@for로 넣고 빼도 실제 순서대로 표시합니다.

단계 표시기는 진행 상태만 보여 주므로 단계를 눌러 이동하지 않습니다. 이전·다음 버튼 등에서 current를 바꿔 단계를 옮깁니다.

ts
import { Component } from '@angular/core'
import { KrdsStep, KrdsStepIndicator } from '@krds.ui/angular'

@Component({
  selector: 'demo-step-indicator-basic',
  imports: [KrdsStepIndicator, KrdsStep],
  template: `
    <ol krdsStepIndicator [current]="3">
      <li krdsStep step="1단계">단계 레이블</li>
      <li krdsStep step="2단계">단계 레이블</li>
      <li krdsStep step="3단계">단계 레이블</li>
      <li krdsStep step="4단계">단계 레이블</li>
      <li krdsStep step="5단계">단계 레이블</li>
    </ol>
  `
})
export default class StepIndicatorBasic {}

상태 지정 ​

krdsStep의 status로 단계의 상태를 직접 정합니다. status는 current로 정한 상태보다 우선합니다.

ts
import { Component } from '@angular/core'
import { KrdsStep, KrdsStepIndicator } from '@krds.ui/angular'

@Component({
  selector: 'demo-step-indicator-forced-status',
  imports: [KrdsStepIndicator, KrdsStep],
  template: `
    <ol krdsStepIndicator>
      <li krdsStep step="1단계" status="done">약관 동의</li>
      <li krdsStep step="2단계" status="active">정보 입력</li>
      <li krdsStep step="3단계" status="pending">신청 완료</li>
    </ol>
  `
})
export default class StepIndicatorForcedStatus {}

페이지 타이틀과 함께 ​

ts
import { Component } from '@angular/core'
import { KrdsStep, KrdsStepIndicator } from '@krds.ui/angular'

@Component({
  selector: 'demo-step-indicator-with-page-title',
  imports: [KrdsStepIndicator, KrdsStep],
  template: `
    <div class="page-title-wrap between">
      <h2 class="h-tit">타이틀</h2>
      <ol krdsStepIndicator [current]="2">
        <li krdsStep step="1단계">유의 사항 확인</li>
        <li krdsStep step="2단계">신청인 정보</li>
        <li krdsStep step="3단계">이사 전 살던 곳</li>
        <li krdsStep step="4단계">이사 온 곳</li>
      </ol>
    </div>
  `
})
export default class StepIndicatorWithPageTitle {}

KrdsStepIndicator ​

선택자 ol[krdsStepIndicator]

Inputs

이름타입기본값설명
currentnumber0현재 단계 위치 (0부터, 숫자가 아니면 첫 단계)

Methods

이름시그니처설명
statusOf(step: KrdsStep): KrdsStepStatus단계의 위치에 따른 상태

KrdsStep ​

선택자 li[krdsStep]

Inputs

이름타입기본값설명
step (필수)string | number-단계 번호 (예: '1단계')
status'' | 'done' | 'active' | 'pending'-상태를 직접 정함 (지정하지 않으면 단계 표시기 안의 순서로 정함)