Steps
문서에 적어 두는 번호 매긴 절차를 보여 줘요.
핵심 속성
| Part | 렌더링 | 용도 |
|---|---|---|
Root | 의미 있는 순서 있는 목록 | 전체 절차 |
Item | 번호 marker가 있는 목록 항목 | rich children을 포함한 한 단계 |
Progress | 접근 가능한 segmented progressbar | 단계가 정해진 흐름의 현재 위치 |
Root와 Item은 표현 전용이에요. Progress는 1부터 시작하는 current와 total을 받아 범위를 안전하게 조정하고 progressbar 시맨틱으로 알려 줘요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/steps.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRSteps } from '@tinyrack/ui/components/steps';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
사용법
설치 절차 고유 링크
각 작업에 `Item` 하나를 사용하세요.
예시
전체 설정 가이드 고유 링크
같은 번호 목록 안에 제목, 설명, 코드를 함께 구성할 수 있어요.
TRSteps.Progress는 흐름을 조작하는 컨트롤 옆에서 진행 상태를 알릴 때 사용하세요. 단계 이동이나 제출 동작은 포함하지 않아요.
상태 경계
Root와 Item에는 current, completed, disabled 상태가 없어요. 다른 컨트롤이 작업 흐름을 관리한다면 Item의 aria-current를 "step"으로 설정하세요. Progress는 숫자 진행 상태만 관리하며 흐름의 맥락을 담은 접근 가능한 label이 필요해요.
좁은 화면에서는 긴 콘텐츠가 줄바꿈돼요. 조절할 만한 시각적 수치 prop이 없어서 플레이그라운드는 제공하지 않아요.
API
| Export | Element | Props |
|---|---|---|
TRSteps.Root, TRStepsRoot | ol | native ordered-list props와 React 19 ref를 포함하는 TRStepsRootProps |
TRSteps.Item, TRStepsItem | li | native list-item props와 React 19 ref를 포함하는 TRStepsItemProps |
TRSteps.Progress, TRStepsProgress | div[role="progressbar"] | current, total, 접근 가능한 label, native div props와 React 19 ref를 포함하는 TRStepsProgressProps |
Style token
root에서 --tr-steps-gap, --tr-steps-margin-block, --tr-steps-item-border, --tr-steps-item-border-width, --tr-steps-item-padding-inline-start, --tr-steps-marker-background, --tr-steps-marker-color, --tr-steps-marker-font-size, --tr-steps-marker-font-weight, --tr-steps-marker-radius, --tr-steps-marker-size를 재정의할 수 있어요. 각 토큰은 의미 기반 Tinyrack 토큰을 대체 값으로 사용해요.