Stepper

인디케이터와 제목이 있는 다단계 플로우용 단계 목록.

Stepper는 순서 있는 단계의 진행을 추적합니다. 위저드·온보딩에 사용하세요. 선형 진행만 필요하면 Progress 또는 ProgressStepper를 권장합니다.

AccountProfile & email
PlanBilling cycle
ReviewConfirm details

계약

Overview

Machine-readable contract from Component Spec.

component: stepperexport: Stepperversion: 1attributes: data-refineui=stepper

Anatomy

Part	data-refineui
root	stepper
content	stepper-content
description	stepper-description
indicator	stepper-indicator
item	stepper-item
list	stepper-list
separator	stepper-separator
separator_fill	stepper-separator-fill
separator_rail	stepper-separator-rail
separator_track	stepper-separator-track
title	stepper-title

States

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

Keyboard

Key	Action	Native
Enter	activate	true
Space	activate	true

Layout

Property	Value
direction	logical
rtl	true

설치

npm install @refineui/react @refineui/tokens

사용법

import {
  Stepper,
  StepperList,
  StepperItem,
  StepperIndicator,
  StepperTitle,
  StepperDescription,
  StepperSeparator,
} from "@refineui/react";

<Stepper value={step} onValueChange={setStep}>
  <StepperList>
    <StepperItem value={0}>
      <StepperIndicator>1</StepperIndicator>
      <StepperTitle>Account</StepperTitle>
      <StepperDescription>Profile & email</StepperDescription>
    </StepperItem>
    <StepperSeparator />
    <StepperItem value={1}>
      <StepperIndicator>2</StepperIndicator>
      <StepperTitle>Plan</StepperTitle>
    </StepperItem>
  </StepperList>
</Stepper>