단계 표시기
실험composite여러 단계 폼에서 지금 어디까지 왔는지 완료·현재·남은 단계로 보여줍니다.
@tissue-ui/layout-react설치
bash
npm install @tissue-ui/layout-reacttsx
import { StepIndicator } from "@tissue-ui/layout-react";언제 쓰나
- 여러 단계로 된 폼에서 현재 진행 위치를 보여줄 때.
예제
진행 중
첫 단계 · 마지막 단계
current 를 바꾸면 완료·현재·남은 단계 표시가 함께 바뀝니다.
여러 단계
단계가 많아도 완료·현재·남은 단계로 한눈에 보여줍니다.
속성
| 속성 | 타입 | 설명 |
|---|---|---|
| steps | node | 단계 목록입니다. 단계마다 키와 화면에 보일 이름을 넣습니다. |
| current | string | 지금 진행 중인 단계의 키입니다. |
위 옵션 말고도 className·onClick 같은 일반 HTML 속성을 그대로 넘길 수 있습니다.
상태
default
이 페이지의 옵션·상태는 실제 코드 정의에서 그대로 가져온 것입니다. 에이전트는 같은 내용을 llms.txt 로 읽습니다.