Examples

스텝 카운트

StepGuide는 현재 단계와 전체 단계 수를 표시할 수 있습니다. 다음은 스텝 카운트를 사용하는 예제입니다.

stepGuide({
  el: document.body,
  options: {
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '종료',
    },
    // 스텝 카운트 표시 (기본값: true)
    hideStepCount: false,
    steps: [
      {
        title: '첫 번째 단계',
        description: '현재 1/4 단계입니다.',
        element: '#step1-count',
        position: 'bottom',
      },
      {
        title: '두 번째 단계',
        description: '현재 2/4 단계입니다.',
        element: '#step2-count',
        position: 'bottom',
      },
      {
        title: '세 번째 단계',
        description: '현재 3/4 단계입니다.',
        element: '#step3-count',
        position: 'bottom',
      },
      {
        title: '마지막 단계',
        description: '현재 4/4 단계입니다.',
        element: '#step4-count',
        position: 'bottom',
      },
    ],
  },
});

스텝 카운트

`options.hideStepCount` 속성을 `false`로 설정하면 스텝 카운트가 표시됩니다.

첫 번째 단계

두 번째 단계

세 번째 단계

마지막 단계