Examples

callback 함수 실행하기

• stepGuide()를 실행하면 instance 객체가 생성 됩니다.
• 생성된 인스턴스의 onChange() 메서드로 스텝 변경 시 콜백 함수를 설정할 수 있습니다.
• onChange() 콜백은 현재 스텝 객체(currentStep)와 이벤트 객체(e)를 매개변수로 받아 스텝 정보에 접근할 수 있습니다.
• 생성된 인스턴스의 onExit() 메서드로 종료 시 콜백 함수를 설정할 수 있습니다.
• 콜백 함수들은 이벤트 객체를 통해 사용자 액션을 구분하고 특별한 처리를 할 수 있습니다.

const guide = stepGuide({
  el: document.body,
  options: {
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '종료',
    },
    steps: [
      {
        title: '첫 번째 단계',
        description: '현재 1/3 단계입니다.',
        element: '#step1-call-back',
        position: 'bottom',
      },
      {
        title: '두 번째 단계',
        description: '현재 2/3 단계입니다.',
        element: '#step2-call-back',
        position: 'bottom',
      },
      {
        title: '마지막 단계',
        description: '현재 3/3 단계입니다.',
        element: '#step3-call-back',
        position: 'bottom',
      },
    ],
  },
});

guide.onChange((currentStep, e) => {
  console.log('onChange', currentStep, e);
});

guide.onExit((e) => {
  console.log('onExit', e.target.id || e.key);
  if (e.target.id && e.target.id === 'step-guide-complete') {
    alert('complete');
  }
});

콜백 함수 호출

스텝 가이드 인스턴스의 `onExit()`로 종료시 callback 함수를 호출 하거나, `onChange()` 메서드로 스텝 변경 시 콜백 함수를 설정할 수 있습니다.

첫 번째 단계

두 번째 단계

마지막 단계