KRDS Vue

단계 표시기 Step indicator ​

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

KRDS 가이드

기본 ​

modelValue에 현재 단계의 인덱스(0부터 시작)를 지정합니다. 그보다 앞의 단계는 완료(done), 뒤의 단계는 대기(pending) 상태로 표시됩니다. 단계 표시기는 진행 상태만 보여 주므로(단계를 눌러 이동하지 않음), 이전/다음 버튼 등에서 modelValue를 바꿔 단계를 옮깁니다. API 표의 update:modelValue 이벤트는 기존 코드 호환용으로 남아 있으며 보내지 않습니다.

  1. 1단계단계 레이블
  2. 2단계단계 레이블
  3. 3단계단계 레이블
  4. 현재단계4단계단계 레이블
  5. 5단계단계 레이블
vue
<script setup lang="ts">
  import { KrdsStep, KrdsStepIndicator } from '@krds.ui/vue'
</script>

<template>
  <KrdsStepIndicator :model-value="3">
    <KrdsStep step="1단계" title="단계 레이블" />
    <KrdsStep step="2단계" title="단계 레이블" />
    <KrdsStep step="3단계" title="단계 레이블" />
    <KrdsStep step="4단계" title="단계 레이블" />
    <KrdsStep step="5단계" title="단계 레이블" />
  </KrdsStepIndicator>
</template>

상태 지정 ​

KrdsStep의 status로 단계의 상태를 직접 지정합니다. status는 modelValue로 계산한 상태보다 우선합니다.

  1. 1단계약관 동의
  2. 현재단계2단계정보 입력
  3. 3단계신청 완료
vue
<script setup lang="ts">
  import { KrdsStep, KrdsStepIndicator } from '@krds.ui/vue'
</script>

<template>
  <KrdsStepIndicator>
    <KrdsStep step="1단계" title="약관 동의" status="done" />
    <KrdsStep step="2단계" title="정보 입력" status="active" />
    <KrdsStep step="3단계" title="신청 완료" status="pending" />
  </KrdsStepIndicator>
</template>

페이지 타이틀과 함께 ​

타이틀

  1. 1단계유의 사항 확인
  2. 2단계신청인 정보
  3. 현재단계3단계이사 전 살던 곳
  4. 4단계이사 온 곳
vue
<script setup lang="ts">
  import { KrdsStep, KrdsStepIndicator } from '@krds.ui/vue'
</script>

<template>
  <div class="page-title-wrap between">
    <h2 class="h-tit">타이틀</h2>
    <KrdsStepIndicator :model-value="2">
      <KrdsStep step="1단계" title="유의 사항 확인" />
      <KrdsStep step="2단계" title="신청인 정보" />
      <KrdsStep step="3단계" title="이사 전 살던 곳" />
      <KrdsStep step="4단계" title="이사 온 곳" />
    </KrdsStepIndicator>
  </div>
</template>

KrdsStepIndicator ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
modelValuenumber0현재 단계 인덱스 (0부터 시작). 앞 단계는 완료, 뒤 단계는 대기로 표시

Events

이름인자설명
update:modelValue[value: number]보내지 않음: 단계 표시기는 진행 상태만 보여 주므로 v-model 값이 바뀌지 않습니다 (기존 코드 호환용, 다음 주요 버전에서 제거)

Slots

이름설명
default단계 (KrdsStep)

KrdsStep ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
status"done" | "active" | "pending"-단계 상태 (지정하지 않으면 KrdsStepIndicator가 순서에 따라 정함)
title (필수)string-단계 제목
step (필수)string | number-단계 번호

Events

이름인자설명
click[event: MouseEvent, step: string | number]단계를 클릭했을 때 (단계 번호)

Slots

이름설명
default단계 제목 아래 추가 내용