Steps#

다단계 진행 상황을 시각적으로 표시하는 읽기 전용 컴포넌트입니다.

Live Preview#

class StepsDefaultExample extends StatelessComponent {
  const StepsDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return const CoSteps(
      currentStep: 2,
      items: [
        CoreStepData(
          title: 'Create Account',
          description: 'Sign up with your email',
        ),
        CoreStepData(
          title: 'Verify Email',
          description: 'Check your inbox',
        ),
        CoreStepData(
          title: 'Setup Profile',
          description: 'Add your information',
        ),
        CoreStepData(
          title: 'Complete',
          description: 'Ready to go',
        ),
      ],
    );
  }
}

class StepsDefaultExample extends StatelessWidget {
  const StepsDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const CoSteps(
      currentStep: 2,
      items: [
        CoreStepData(
          title: 'Create Account',
          description: 'Sign up with your email',
        ),
        CoreStepData(
          title: 'Verify Email',
          description: 'Check your inbox',
        ),
        CoreStepData(
          title: 'Setup Profile',
          description: 'Add your information',
        ),
        CoreStepData(
          title: 'Complete',
          description: 'Ready to go',
        ),
      ],
    );
  }
}

class StepsHorizontalExample extends StatelessComponent {
  const StepsHorizontalExample({super.key});

  @override
  Component build(BuildContext context) {
    return const CoSteps(
      currentStep: 1,
      vertical: false,
      items: [
        CoreStepData(title: 'Cart'),
        CoreStepData(title: 'Shipping'),
        CoreStepData(title: 'Payment'),
        CoreStepData(title: 'Review'),
      ],
    );
  }
}

class StepsHorizontalExample extends StatelessWidget {
  const StepsHorizontalExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const CoSteps(
      currentStep: 1,
      vertical: false,
      items: [
        CoreStepData(title: 'Cart'),
        CoreStepData(title: 'Shipping'),
        CoreStepData(title: 'Payment'),
        CoreStepData(title: 'Review'),
      ],
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 주문 진행, 배송 추적, 절차 안내 등 진행 단계를 보여줄 때
• 각 단계의 완료/진행/대기 상태를 시각적으로 구분해야 할 때

대신 다른 컴포넌트를 사용하세요:

• Stepper: 사용자가 단계를 클릭하여 이동할 수 있는 인터랙티브 프로세스
• Progress: 단일 진행률을 바 형태로 표시

기본 사용법 (Basic Usage)#

CoSteps(
  currentStep: 2,
  items: [
    CoreStepData(
      title: 'Create Account',
      description: 'Sign up with your email',
    ),
    CoreStepData(
      title: 'Verify Email',
      description: 'Check your inbox',
    ),
    CoreStepData(
      title: 'Setup Profile',
      description: 'Add your information',
    ),
    CoreStepData(
      title: 'Complete',
      description: 'Ready to go',
    ),
  ],
)

변형 (Variants)#

세로 (기본)#

CoSteps(
  currentStep: 2,
  items: [
    CoreStepData(title: 'Create Account', description: 'Sign up with your email'),
    CoreStepData(title: 'Verify Email', description: 'Check your inbox'),
    CoreStepData(title: 'Setup Profile', description: 'Add your information'),
    CoreStepData(title: 'Complete', description: 'Ready to go'),
  ],
)

가로 (vertical: false)#

CoSteps(
  currentStep: 1,
  vertical: false,
  items: [
    CoreStepData(title: 'Cart'),
    CoreStepData(title: 'Shipping'),
    CoreStepData(title: 'Payment'),
    CoreStepData(title: 'Review'),
  ],
)

가로 레이아웃은 인디케이터가 동일한 행에 배치되고, 인디케이터 사이에 가로 커넥터 라인이 그려집니다. 각 단계의 콘텐츠는 인디케이터 아래에 배치됩니다.

Props / Parameters#

CoreStepData#

동작 스펙 (Behavior)#

상태 표시#

• currentStep 미만: 완료 상태 (primary 색상 원 + 체크 아이콘)
• currentStep 인덱스: 현재 활성 (primary 색상 원 + 번호, 볼드)
• currentStep 초과: 대기 상태 (surfaceContainer 원 + 번호)

커넥터#

• 단계 간 선으로 연결 (세로 레이아웃: 세로선, 가로 레이아웃: 가로선)
• 이전 단계가 완료된 경우 primary 색상
• 이후 단계는 surfaceContainer 색상

인터랙션#

• 읽기 전용 — 탭/클릭 동작 없음
• 인터랙티브한 단계 네비게이션은 Stepper 사용

접근성 (Accessibility)#

스크린 리더#

• 각 단계는 순서대로 읽힘 (title + description)
• 완료 상태의 체크 아이콘은 시각적 표시용

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• Stepper: 사용자가 클릭으로 이동 가능한 인터랙티브 버전
• Progress: 단일 진행률 표시