메인 콘텐츠로 건너뛰기

Steps 단계 표시

사용자가 흐름에 따라 작업을 완료하도록 안내합니다. 가로 / 세로, 클릭 내비게이션, 전체 상태 덮어쓰기를 지원합니다.

기본 사용법​

기본 사용법
  1. 밑그림
    구도와 선을 정하기
  2. 번짐
    먹색을 층층이 스며들게 하기
  3. 채색
    단청의 색을 점찍기
  4. 낙관
    서명과 인장을 찍어 완성
  1. 밑그림
  2. 번짐
  3. 채색
    이 부분은 재작업이 필요합니다
  4. 낙관
  1. 밑그림
    구도와 선을 정하기
  2. 번짐
    먹색을 층층이 스며들게 하기
  3. 채색
  4. 낙관
import { useState } from 'react'
import { LhSteps, LhStep } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhSteps current={current} onChange={(index) => setCurrent(index)}>
      <LhStep title="밑그림" description="구도와 선을 확정합니다" />
      <LhStep title="먹 번짐" description="먹색을 단계적으로 번지게 합니다" />
      <LhStep title="채색" description="채색을 입입니다" />
      <LhStep title="낙관" description="낙관과 인장으로 완성합니다" />
    </LhSteps>
  )
}

Steps Props​

프로퍼티설명타입옵션기본값
current현재 단계 인덱스(0부터, 제어형)number——
defaultCurrent현재 단계 기본값(비제어)number—0
direction방향'horizontal' | 'vertical'—'horizontal'
clickable단계 클릭 내비게이션 허용 여부boolean—false
status모든 단계의 상태를 덮어씀(커스텀 표시용)'wait' | 'process' | 'finish' | 'error'——
themeVars컴포넌트 수준 테마 변수(키에 자동으로 --lh- 접두사 추가)Record<string, string>——
sx간편 레이아웃 프로퍼티SxProps——

Step Props​

프로퍼티설명타입기본값
title단계 제목ReactNode—
description단계 설명ReactNode—
icon커스텀 아이콘 이름(미전달 시 finish / error는 체크 / 엑스 아이콘, 나머지는 숫자 표시)LhIconName—

Steps 이벤트​

이벤트설명콜백 시그니처Vue 대응
onChange현재 단계가 변경될 때 발생(clickable일 때만 발생)(index: number) => void@change
제어 / 비제어

current를 전달하면 제어형(컴포넌트가 내부 상태를 갖지 않음)이고, defaultCurrent를 전달하면 비제어 내부 상태를 사용합니다. 두 모드 모두 onChange가 발생합니다.

클릭 가능 범위

clickable이 참이어도 "완료"와 "진행 중" 단계만 <button>으로 렌더링됩니다. 이후 단계(wait 상태)는 항상 <span>이며, 도달하지 않은 흐름 노드로의 점프를 막습니다 — lh-ui-plus 동작과 일치합니다.

자식 노드 제한

children은 반드시 직접 LhStep이어야 합니다(.map으로 렌더링 가능). 커스텀 컴포넌트로 감쌀 수 없습니다 — 부모 컴포넌트가 Children.toArray로 자식 요소 타입을 필터링해 인덱스를 주입하기 때문에, 감싸면 인덱스 주입이 실패하고 상태 계산이 꼬입니다.

테마 변수​

themeVars의 키에 자동으로 --lh- 접두사가 붙고 루트 요소의 인라인 스타일에 기록됩니다:

<LhSteps current={1} themeVars={{ 'steps-item-basis': '72px' }}>
  <LhStep title="밑그림" />
  <LhStep title="먹 번짐" />
</LhSteps>

접근성​

목록은 <ol role="list">이고, 현재 단계는 aria-current="step"을 출력합니다. 각 단계의 상태는 aria-label(언어 패 steps.step 템플릿, 예: "2단계")과 상태 클래스명으로 함께 표현됩니다.

ref​

forwardRef<HTMLOListElement> — <ol> 루트 요소. LhStep은 HTMLLIElement를 전달합니다.

스타일​

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/steps'