Progress Stepper

1. Cart
2. Shipping
3. Payment
4. Review

계약

Overview

Machine-readable contract from Component Spec.

component: progress-stepperexport: ProgressStepperversion: 1attributes: data-refineui=progress-stepper

Anatomy

Part	data-refineui
root	progress-stepper
fill	progress-stepper-fill
item	progress-stepper-item
label	progress-stepper-label
list	progress-stepper-list
list_wrap	progress-stepper-list-wrap
marker	progress-stepper-marker
track	progress-stepper-track

States

Scope	Category	Values
component	component	data-state: complete, current, upcoming
component	environment	forced-colors, dir
progress-stepper-item	component	data-state: complete, current, upcoming

Accessibility

Slot	Element	Role
progress-stepper-track	div	progressbar

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { ProgressStepper, ProgressStepperList, ProgressStepperItem, ProgressStepperMarker, ProgressStepperLabel } from "@refineui/react";

<ProgressStepper value={currentStep} onValueChange={setCurrentStep}>
  <ProgressStepperList>
    <ProgressStepperItem value={1}>
      <ProgressStepperMarker />
      <ProgressStepperLabel>Account</ProgressStepperLabel>
    </ProgressStepperItem>
    <ProgressStepperItem value={2}>
      <ProgressStepperMarker />
      <ProgressStepperLabel>Profile</ProgressStepperLabel>
    </ProgressStepperItem>
    <ProgressStepperItem value={3}>
      <ProgressStepperMarker />
      <ProgressStepperLabel>Complete</ProgressStepperLabel>
    </ProgressStepperItem>
  </ProgressStepperList>
</ProgressStepper>

API 레퍼런스

ProgressStepper

Prop	Default	Type	Description
value	—	number	제어형 활성 단계 값.
defaultValue	—	number	비제어형 초기 단계.
onValueChange	—	(value: number) => void	단계 변경 시 이벤트 핸들러.

ProgressStepperItem

Prop	Default	Type	Description
value	—	number	단계 식별자(필수).
disabled	false	boolean	이 단계를 비활성화합니다.

ProgressStepperMarker

단계 인디케이터(원/체크마크).

ProgressStepperLabel

단계 레이블 텍스트.