Steps

Steps (단계)

다중 단계 프로세스의 진행 상태를 나타내는 컴포넌트예요. 마법사(wizard)처럼 여러 단계를 순서대로 안내할 때 유용해요.

출처: 문서

본문

Steps는 여러 단계로 이루어진 프로세스의 진행 상황을 보여 주는 컴포넌트예요. <ExampleTabs name="steps-basic" />

사용법 (Usage)

import { Steps } from "@chakra-ui/react"

<Steps.Root>
  <Steps.List>
    <Steps.Item>
      <Steps.Trigger>
        <Steps.Indicator />
        <Steps.Title />
        <Steps.Description />
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>
  <Steps.Content />
  <Steps.CompletedContent />
  <Steps.PrevTrigger />
  <Steps.NextTrigger />
</Steps.Root>

예시 (Examples)

크기 (Sizes)

size prop으로 단계 컴포넌트의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop으로 단계 컴포넌트의 외형을 바꿀 수 있어요.

색상 (Colors)

colorPalette prop으로 컴포넌트의 색상을 바꿀 수 있어요.

트리거 (Trigger)

Steps.Trigger 컴포넌트로 단계를 클릭 가능하게 만들 수 있어요.

세로 (Vertical)

orientation prop으로 단계 컴포넌트의 방향을 바꿀 수 있어요.

제어 (Controlled)

step과 onStepChange prop으로 단계 컴포넌트의 현재 단계를 제어할 수 있어요.

검증 (Validation)

isStepValid prop으로 탐색을 허용하기 전에 각 단계를 검증할 수 있어요. onStepInvalid prop으로 잘못된 단계 전환을 처리할 수 있어요.

스토어 (Store)

단계를 제어하는 또 다른 방법은 RootProvider 컴포넌트와 useSteps 스토어 훅을 사용하는 거예요. 이렇게 하면 단계 바깥에서도 상태와 메서드에 접근할 수 있어요.

아이콘 (Icon)

StepsItem 컴포넌트에 icon prop을 넘기면 아이콘을 표시할 수 있어요.

설명 (Description)

StepsItem 컴포넌트에 description prop을 넘기면 설명을 표시할 수 있어요.

Props

Steps 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.

더 알아보기 (Learn more)