Steps 단계 표시

사용자가 단계별 흐름을 완료하도록 안내합니다. 수평/수직 방향, 클릭 가능한 내비게이션과 상태 덮어쓰기를 지원합니다.

단계 표시

<template>
  <div class="demo-col" style="max-width: 680px; gap: 28px">
    <LhSteps :current="current">
      <LhStep title="수집" description="고화질 스캔 및 등록" />
      <LhStep title="색교정" description="색상 기준값 비교" />
      <LhStep title="심사" description="전문가 재검토" />
      <LhStep title="발행" description="디지털 전시관 오픈" />
    </LhSteps>
    <div class="demo-row" style="gap: 12px">
      <LhButton size="small" :disabled="current === 0" @click="current--">이전</LhButton>
      <LhButton size="small" type="primary" :disabled="current === 3" @click="current++">다음</LhButton>
    </div>
    <LhSteps :current="2" direction="vertical">
      <LhStep title="수집" description="완료" />
      <LhStep title="색교정" description="완료" />
      <LhStep title="심사" description="진행 중" />
      <LhStep title="발행" description="대기 중" />
    </LhSteps>
    <LhSteps :current="1" status="error" :clickable="true" @click="onStepClick">
      <LhStep title="첫 번째 단계" />
      <LhStep title="오류가 발생한 단계" icon="lh-icon-user" />
      <LhStep title="세 번째 단계" />
    </LhSteps>
    <p class="demo-note">clickable 로 클릭 내비게이션; status="error" 로 전체 상태 덮어쓰기; icon 으로 아이콘 지정.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    current: 1,
  }),
  methods: {
    onStepClick(index) {
      this.current = index
    },
  },
}
</script>

Steps Props

프로퍼티	설명	타입	기본값
current	현재 단계 인덱스 (:current.sync, 이벤트명 update:current, 0부터 시작)	number	0
direction	방향	'horizontal' \| 'vertical'	'horizontal'
clickable	단계를 클릭하여 내비게이션할 수 있는지	boolean	false
status	모든 단계의 상태를 덮어씁니다 (사용자 지정 표시용)	'wait' \| 'process' \| 'finish' \| 'error'	—
sx	sx 레이아웃 단축 프로퍼티	—	—

Step Props

프로퍼티	설명	타입	기본값
title	단계 제목 (title 슬롯으로도 사용 가능)	string	—
description	단계 설명 (description 슬롯으로도 사용 가능)	string	—
icon	사용자 지정 아이콘 클래스명 (넘기지 않으면 finish/error 에 체크/엑스, 그 외에는 일련 번호 표시)	string	—

Events

이벤트	설명	콜백 매개변수
click	단계 항목 클릭 (clickable 를 켜야 의미가 있음)	(인덱스)