단계 표시기

실험composite

여러 단계 폼에서 지금 어디까지 왔는지 완료·현재·남은 단계로 보여줍니다.

@tissue-ui/layout-react

설치

bash
npm install @tissue-ui/layout-react
tsx
import { StepIndicator } from "@tissue-ui/layout-react";

언제 쓰나

  • 여러 단계로 된 폼에서 현재 진행 위치를 보여줄 때.

예제

진행 중
첫 단계 · 마지막 단계
current 를 바꾸면 완료·현재·남은 단계 표시가 함께 바뀝니다.
여러 단계
단계가 많아도 완료·현재·남은 단계로 한눈에 보여줍니다.

속성

속성타입설명
stepsnode단계 목록입니다. 단계마다 키와 화면에 보일 이름을 넣습니다.
currentstring지금 진행 중인 단계의 키입니다.

위 옵션 말고도 className·onClick 같은 일반 HTML 속성을 그대로 넘길 수 있습니다.

상태
default
이 페이지의 옵션·상태는 실제 코드 정의에서 그대로 가져온 것입니다. 에이전트는 같은 내용을 llms.txt 로 읽습니다.