Initial import
This commit is contained in:
43
docs/components/stepper.md
Executable file
43
docs/components/stepper.md
Executable file
@@ -0,0 +1,43 @@
|
||||
# Stepper
|
||||
|
||||
## 목적
|
||||
|
||||
여러 단계를 순서대로 표시하고 현재 진행 위치를 강조하는 stepper 컴포넌트입니다.
|
||||
|
||||
## 구현 위치
|
||||
|
||||
```text
|
||||
src/components/stepper
|
||||
├─ StepperUI.tsx
|
||||
├─ index.ts
|
||||
├─ types.ts
|
||||
└─ samples/
|
||||
└─ BaseSample.tsx
|
||||
```
|
||||
|
||||
## 특징
|
||||
|
||||
- 내부적으로 `ProcessFlowUI`를 재사용해 동일한 상태 표현과 스타일을 유지합니다.
|
||||
- `horizontal`, `vertical` 두 방향을 지원합니다.
|
||||
- `currentStepKey`만 넘겨도 현재 단계를 기준으로 완료/진행중/대기 상태를 계산합니다.
|
||||
- 각 단계에 `status`를 직접 지정하면 수동 상태 제어도 가능합니다.
|
||||
- `compact`, `showConnector`, `statusLabels`, `statusIcons`, `statusStyles`를 그대로 사용할 수 있습니다.
|
||||
|
||||
## 기본 예시
|
||||
|
||||
```tsx
|
||||
<Stepper
|
||||
steps={[
|
||||
{ key: 'draft', label: '초안' },
|
||||
{ key: 'review', label: '검토' },
|
||||
{ key: 'done', label: '완료' },
|
||||
]}
|
||||
currentStepKey="review"
|
||||
/>
|
||||
```
|
||||
|
||||
## 참고
|
||||
|
||||
- `Stepper`와 `StepperUI`를 함께 export하므로 둘 중 하나를 선택해 사용할 수 있습니다.
|
||||
- `ProcessFlowUI`의 별칭 성격 컴포넌트이므로 동작 규칙과 스타일 계열은 동일합니다.
|
||||
- 대표 샘플은 `src/components/stepper/samples/BaseSample.tsx`를 사용합니다.
|
||||
Reference in New Issue
Block a user