Steps 단계 표시

흐름 단계 표시: 현재/완료/대기/오류 네 가지 상태, 가로/세로 방향, 클릭 내비게이션 옵션. 가로 단계 표시줄은 고정 폭 기준에 따라 자동으로 줄을 바꾸며, 제목은 항상 한 줄로 표시됩니다.

기본 사용법

먹 갈기
붓질
날인

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="먹 갈기" />
    <LhStep title="붓질" />
    <LhStep title="날인" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="먹 갈기" />
    <LhStep title="붓질" />
    <LhStep title="날인" />
  </LhSteps>
</template>

설명 포함

가입
기본 정보 입력
인증
이메일과 휴대전화 인증
개통
계정 권한 개통

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="가입" description="기본 정보 입력" />
    <LhStep title="인증" description="이메일과 휴대전화 인증" />
    <LhStep title="개통" description="계정 권한 개통" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="가입" description="기본 정보 입력" />
    <LhStep title="인증" description="이메일과 휴대전화 인증" />
    <LhStep title="개통" description="계정 권한 개통" />
  </LhSteps>
</template>

icon으로 단계에 커스텀 아이콘을 지정합니다 (내장 LhIcon 아이콘 이름 사용, 예: user/check/star). 전달하지 않으면 완료/오류에는 체크와 엑스가, 나머지에는 순번이 표시됩니다. 아이콘 렌더링을 완전히 커스터마이징하려면 #icon 슬롯으로 덮어씌울 수 있습니다.

가입
인증
개통

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="가입" />
    <LhStep icon="check" title="인증" />
    <LhStep icon="star" title="개통" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="가입" />
    <LhStep icon="check" title="인증" />
    <LhStep icon="star" title="개통" />
  </LhSteps>
</template>

오류 상태

업로드
검증
완료

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="업로드" />
    <LhStep title="검증" />
    <LhStep title="완료" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="업로드" />
    <LhStep title="검증" />
    <LhStep title="완료" />
  </LhSteps>
</template>

status는 전체 덮어쓰기입니다. 설정하면 모든 단계가 해당 상태가 되며, 커스텀 표시에 적합합니다.

클릭 가능한 내비게이션

초안 선택
바탕본 선택
모사
대임 또는 배임
표장
벽에 걸어 표장

현재 단계: 1

vue

<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="초안 선택" description="바탕본 선택" />
    <LhStep title="모사" description="대임 또는 배임" />
    <LhStep title="표장" description="벽에 걸어 표장" />
  </LhSteps>
</template>

vue

<script>
export default {
  data() {
    return { current: 1 }
  },
}
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="초안 선택" description="바탕본 선택" />
    <LhStep title="모사" description="대임 또는 배임" />
    <LhStep title="표장" description="벽에 걸어 표장" />
  </LhSteps>
</template>

세로 방향

시작
기세를 숨기며 붓을 시작
진행
중봉으로 붓을 나아감
마무리
붓을 거두어 필치를 회수

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="시작" description="기세를 숨기며 붓을 시작" />
    <LhStep title="진행" description="중봉으로 붓을 나아감" />
    <LhStep title="마무리" description="붓을 거두어 필치를 회수" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="시작" description="기세를 숨기며 붓을 시작" />
    <LhStep title="진행" description="중봉으로 붓을 나아감" />
    <LhStep title="마무리" description="붓을 거두어 필치를 회수" />
  </LhSteps>
</template>

고정 폭 줄 바꿈

가로 단계 표시줄은 --lh-steps-item-basis (기본 160px) 기준 폭으로 배치됩니다. 컨테이너에 들어가면 각 단계가 한 줄을 균등하게 차지하고, 들어가지 않으면 단계 전체가 다음 줄로 넘어가며 제목이 짜부라지지 않습니다. 제목은 항상 한 줄로 표시되고 너무 길면 말줄임표로 잘리며, 줄 바꿈 후 줄 끝 단계의 연결선은 자동으로 숨겨져 줄 끝의 빈 공간을 가리키지 않습니다.

초안 선택
바탕본 선택
모사
대임 또는 배임
제발
글을 쓰고 도장을 찍음
표장
벽에 걸어 표장

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="초안 선택" description="바탕본 선택" />
    <LhStep title="모사" description="대임 또는 배임" />
    <LhStep title="제발" description="글을 쓰고 도장을 찍음" />
    <LhStep title="표장" description="벽에 걸어 표장" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="초안 선택" description="바탕본 선택" />
    <LhStep title="모사" description="대임 또는 배임" />
    <LhStep title="제발" description="글을 쓰고 도장을 찍음" />
    <LhStep title="표장" description="벽에 걸어 표장" />
  </LhSteps>
</template>

위 예시는 컨테이너 너비를 280px로 제한하여 줄 바꿈을 보여줍니다. 줄 바꿈 간격을 바꾸려면 themeVars로 steps-item-basis를 덮어쓰면 됩니다 (키에 자동으로 --lh- 접두사가 붙음): <LhSteps :theme-vars="{ 'steps-item-basis': '220px' }">, LhConfigProvider의 componentTheme.steps로 전역 설정할 수도 있습니다.

Steps API

LhSteps Props

프로퍼티	설명	타입	기본값
current	현재 단계 인덱스 (`v-model:current`, 0부터 시작)	`number`	`0`
direction	방향	`"horizontal" \| "vertical"`	`'horizontal'`
clickable	단계 클릭 내비게이션 가능 여부	`boolean`	`false`
status	모든 단계를 덮어쓰는 전체 상태 (커스텀 표시용)	`"wait" \| "process" \| "finish" \| "error"`	—
themeVars	컴포넌트 수준 테마 변수 (키에 자동으로 --lh- 접두사 추가)	`{ [x: string]: string; }`	—
sx	sx 빠른 레이아웃 속성	`LhSxProps`	—

LhSteps Events

이벤트명	설명	콜백 매개변수
update:current	현재 단계 변경 (v-model)	`(index: number)`
change	현재 단계 변경	`(index: number)`

LhStep Props

프로퍼티	설명	타입	기본값
title	단계 제목 (title 슬롯 사용 가능)	`string`	`''`
description	단계 설명 (description 슬롯 사용 가능)	`string`	`''`
icon	커스텀 아이콘 이름 (내장 LhIcon 아이콘, 전달하지 않으면 finish/error는 체크/엑스, 나머지는 순번 표시)	`LhIconName`	—

Slots

슬롯	설명	적용 컴포넌트
default	단계 항목 (LhStep 목록)	LhSteps
title	커스텀 제목	LhStep
description	커스텀 설명	LhStep
icon	커스텀 아이콘 (icon prop의 기본 렌더링을 덮어씀)	LhStep

컴포넌트 수준 변수

다음 CSS 변수는 .lh-steps에 기본값이 정의되어 있으며, themeVars로 전역 또는 컴포넌트 수준에서 덮어쓸 수 있습니다 (키에 자동으로 --lh- 접두사가 붙음):

변수명	설명	기본값
`--lh-steps-item-basis`	가로 단계 항목의 고정 폭 기준 너비, 컨테이너에 들어가지 않으면 이 너비 기준으로 줄 바꿈	`160px`

무장애

컨테이너는 <ol role="list">이며, 의미적 순서가 곧 흐름 순서입니다
현재 단계에는 자동으로 aria-current="step"이 설정됩니다
clickable일 때 완료/현재 단계의 머리 부분은 실제 <button>이며, aria-label은 언어 팩(steps.finish / steps.error / steps.step)에서 가져옵니다. 대기 중인 단계는 클릭할 수 없어, 사용자가 도달하지 않은 단계를 건너뛰는 것을 방지합니다
연결선은 의사 요소로 그려져 무장애 트리에 들어가지 않습니다

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다 (packages/components/steps/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 프로퍼티 설명은 위쪽 Props 표를 참조하세요):

LhStepsProps

export interface LhStepsProps {
  /** 현재 단계 인덱스 (v-model:current, 0부터 시작) */
  current?: number
  /** 방향 */
  direction?: LhStepsDirection
  /** 단계 클릭 내비게이션 가능 여부 */
  clickable?: boolean
  /** 모든 단계를 덮어쓰는 전체 상태 (커스텀 표시용) */
  status?: LhStepStatus
  /** 컴포넌트 수준 테마 변수 (키에 자동으로 --lh- 접두사 추가, 예: `steps-item-basis`) */
  themeVars?: Record<string, string>
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhStepProps

export interface LhStepProps {
  /** 단계 제목 (title 슬롯 사용 가능) */
  title?: string
  /** 단계 설명 (description 슬롯 사용 가능) */
  description?: string
  /** 커스텀 아이콘 이름 (전달하지 않으면 finish/error는 체크/엑스, 나머지는 순번 표시) */
  icon?: LhIconName
}

LhIconName _{(출처: @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

LhStepsDirection _{(출처: @lh-ui/share/core/steps)}

/**
 * 단계 표시줄 방향
 */
export type LhStepsDirection = 'horizontal' | 'vertical'

LhStepStatus _{(출처: @lh-ui/share/core/steps)}

/**
 * 단계 상태
 */
export type LhStepStatus = 'wait' | 'process' | 'finish' | 'error'

Steps 단계 표시 ​

기본 사용법 ​

설명 포함 ​

오류 상태 ​

클릭 가능한 내비게이션 ​

세로 방향 ​

고정 폭 줄 바꿈 ​

Steps API ​

LhSteps Props ​

LhSteps Events ​

LhStep Props ​

Slots ​

컴포넌트 수준 변수 ​

무장애 ​

타입 정의 ​