본문으로 건너뛰기

Examples

StepGuide는 다양한 옵션을 통해 사용자에게 단계별 가이드를 제공하는 방법을 보여줍니다. 다음은 StepGuide를 사용한 몇 가지 예제입니다.

기본 예제​

const guide = stepGuide({
  el: document.body,
  options: {
    steps: [
      {
        title: 'Hello',
        description: 'hello',
        element: '#left',
        position: 'bottom',
      },
    ],
  },
});

기본 예제

`options.steps` 배열의 요소의 `title`, `description`, `element`, `position` 속성을 추가하여 툴팁을 표시할 수 있습니다.

첫 번째 단계
두 번째 단계

애니메이션 비활성화​

const guide = stepGuide({
  el: document.body,
  options: {
    useAnimation: false,
    steps: [
      {
        title: 'Hello',
        description: 'hello',
        element: '#left',
        position: 'bottom',
      },
    ],
  },
});

애니메이션 사용 안함

`options.useAnimation` 속성을 `false`로 설정하면 애니메이션이 사용되지 않습니다.

첫 번째 단계
두 번째 단계

배경 클릭 가능​

const guide = stepGuide({
  el: document.body,
  options: {
    exitOnOverlayClick: true,
    steps: [
      {
        title: 'Hello',
        description: 'hello',
        element: '#left',
        position: 'bottom',
      },
    ],
  },
});

클릭 가능한 Dim

`options.exitOnOverlayClick` 속성을 `false`로 설정하면 Dim click시 다음 스텝으로 이동합니다.

첫 번째 단계
두 번째 단계

버튼 라벨 설정​

const guide = stepGuide({
  el: document.body,
  options: {
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '종료',
    },
    steps: [
      {
        title: 'Hello',
        description: 'hello',
        element: '#left',
        position: 'bottom',
      },
    ],
  },
});

버튼 레이블 설정

`options.buttonLabel` 속성을 추가하여 버튼 레이블을 설정할 수 있습니다.

첫 번째 단계
두 번째 단계

Skip 버튼​

const guide = stepGuide({
  el: document.body,
  options: {
    hideSkip: false,
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '종료',
      skip: '다음에 보기',
    },
    steps: [
      {
        title: 'Step 1',
        description: 'Step 1 description',
        element: '#step1-skip',
        position: 'bottom',
      },
      {
        title: 'Step 2',
        description: 'Step 2 description',
        element: '#step2-skip',
        position: 'bottom',
      },
    ],
  },
});

스킵 버튼 설정

`options.hideSkip` 속성을 `false`로 설정하면 스킵 버튼이 표시됩니다.

첫 번째 단계
두 번째 단계

단계 건너뛰기​

const guide = stepGuide({
  el: document.body,
  options: {
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '종료',
    },
    steps: [
      {
        title: 'Step 1',
        description: 'Step 1 description',
        element: '#step1-goto',
        position: 'bottom',
      },
      {
        title: 'Step 2',
        description: 'Step 2 description',
        element: '#step2-goto',
        position: 'bottom',
      },
      {
        title: 'Step 3',
        description: 'Step 3 description',
        element: '#step3-goto',
        position: 'bottom',
      },
    ],
  },
});

스텝 이동

`stepGuide.goToStep(stepIndex)` 메서드를 호출하여 스텝을 이동할 수 있습니다.

첫 번째 단계
두 번째 단계
세 번째 단계

커스텀 스타일 적용​

const guide = stepGuide({
  el: document.body,
  options: {
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '종료',
    },
    steps: [
      {
        title: 'Step 1',
        description: 'Step 1 description',
        element: '#name',
        position: 'bottom',
        customStyle: {
          height: '87px',
          backgroundColor: 'rgba(255, 0, 0, 0.3)',
        },
      },
    ],
  },
});

커스텀 스타일

`options.steps` 배열의 요소의 `customStyle` 속성을 추가하여 툴팁의 스타일을 커스텀할 수 있습니다.

이름나이성별
홍길동20남자

HTML 콘텐츠 사용​

const guide = stepGuide({
  el: document.body,
  options: {
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '종료',
    },
    steps: [
      {
        title: 'Step 1',
        description: '<p style="color: red; font-size: 20px;">Step 1 description</p>',
        element: '#step1-html',
        position: 'bottom',
      },
    ],
  },
});

HTML 사용

`options.steps` 배열의 요소의 `description`, `title` 속성에 HTML을 사용할 수 있습니다.

첫 번째 단계

위치 변경​

StepGuide는 툴팁의 위치를 right, bottom로 지정할 수 있습니다. 다음은 각 위치에 대한 예제입니다.

stepGuide({
  el: document.body,
  options: {
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '종료',
    },
    steps: [
      {
        title: '오른쪽 위치',
        description: '툴팁이 요소의 오른쪽에 표시됩니다.',
        element: '#position-right',
        position: 'right',
      },
      {
        title: '아래쪽 위치',
        description: '툴팁이 요소의 아래쪽에 표시됩니다.',
        element: '#position-bottom',
        position: 'bottom',
      },
    ],
  },
});

위치 변경

`options.steps` 배열의 요소의 각 스텝의 `position` 속성을 추가하여 툴팁의 위치를 변경할 수 있습니다.

오른쪽 위치
아래쪽 위치

스텝 카운트​

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`로 설정하면 스텝 카운트가 표시됩니다.

첫 번째 단계
두 번째 단계
세 번째 단계
마지막 단계

요소 없이 사용하기​

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

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-no-target',
        position: 'bottom',
      },
      {
        title: '두 번째 단계',
        description: '현재 2/3 단계입니다.',
        element: '#step2-no-target',
        position: 'bottom',
      },
      {
        title: '마지막 단계',
        description: '현재 3/3 단계입니다.',
        element: '#step3-no-target',
        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()` 메서드로 스텝 변경 시 콜백 함수를 설정할 수 있습니다.

첫 번째 단계
두 번째 단계
마지막 단계

fixed 요소에 focus​

stepGuide({
  el: document.body,
  options: {
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '완료',
      skip: '건너뛰기',
    },
    steps: [
      {
        title: '가이드 시작',
        description: 'isFixed 옵션의 차이점을 확인해보세요.',
        element: '#start-button',
        position: 'bottom',
      },
      {
        title: '스크롤 가능한 요소 (isFixed: false)',
        description: '이 요소는 자동으로 스크롤되어 화면에 표시됩니다.',
        element: '#scrollable-element',
        position: 'bottom',
      },
      {
        title: '고정된 요소 (isFixed: true)',
        description: '이 요소는 스크롤되지 않고 현재 위치에서 가이드가 표시됩니다.',
        element: '#fixed-element',
        position: 'left',
        isFixed: true,
      },
      {
        title: '가이드 완료',
        description: 'isFixed 옵션의 차이점을 확인했습니다!',
        element: null,
        position: 'bottom',
      },
    ],
    useAnimation: true,
    clickableDim: false,
    hideSkip: false,
    hideStepCount: false,
  },
});

isFixed 옵션 사용

`isFixed` 옵션을 사용하여 요소의 자동 스크롤 여부를 제어할 수 있습니다.

시작 버튼

이 버튼을 클릭하여 가이드를 시작하세요.

긴 콘텐츠 영역

이 영역은 스크롤이 필요한 긴 콘텐츠입니다.

스크롤 가능한 요소

isFixed: false (기본값) - 자동 스크롤이 발생합니다.

추가 콘텐츠

더 많은 콘텐츠로 스크롤을 유도합니다.

이 예제들을 통해 StepGuide의 다양한 옵션을 활용할 수 있습니다.