Stepper
경험 정리처럼 이어지는 여러 단계를 표시.
- 라이브러리 전용
개요
미리보기
- Choose records
- Name the experience
- Look over evidence
- Write a description
- Finish
예시
상태
시작
- Choose records
- Name the experience
- Look over evidence
- Write a description
- Finish
중간
- Look over evidence
- Write a description
- Finish
끝
- Finish
세로
- Look over evidence
- Write a description
- Finish
이렇게 · 이렇게 하지 않기
- 이렇게 경험 정리처럼 사용자가 고른 긴 작업에만 쓴다.
- 이렇게 하지 않기 가입 경로에는 쓰지 않는다(단계 수가 부담을 키운다).
- 이렇게 건너뛸 수 있는 단계는 건너뛸 수 있다고 쓴다.
- 이렇게 하지 않기 “모든 단계를 완료해야 사용 가능”한 구조를 만들지 않는다. 앞으로 건너뛰는 이동은 없다(완료한 단계로만 돌아간다).
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
steps | readonly { label, href?, error?, optional? }[] | — | 단계 목록. error는 그 단계에 문제가 있음(아이콘 + 글자), optional은 건너뛸 수 있음. 미리보기는 5단계. |
active? | 0 | 1 | 2 | 3 | 4 | 0 | 지금 단계(0부터). 앞 단계는 완료로 그린다. |
orientation? | 'horizontal' | 'vertical' | horizontal | 가로는 좁은 폭(≈320)에서 자동으로 세로가 된다. |
onStepChange?: (index) => void | — | — | 완료한 단계를 누르면 호출. 단계가 바뀌면 새 단계 제목(h2)으로 초점을 옮긴다(소비자 몫). |
ref | — | — | ref는 <ol>로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-label(기본 “진행 단계”) 등 네이티브 ol 속성은 <ol>로 간다. className·style·children은 받지 않는다. |
접근성
키보드: 돌아갈 수 있는(완료한) 단계만 Tab에 들어간다.
- 각 단계 이름에 상태를 글자로 넣는다(“5단계 중 2단계, 완료”). 현재는 aria-current="step".
- 완료는 체크 + 실선, 남은 단계는 번호 + 점선, 오류는 아이콘. 색만으로 구분하지 않는다. 모션 없음.