Options

StepGuide는 다양한 옵션을 제공하여 사용자 경험을 커스터마이징할 수 있습니다. 다음은 StepGuide에서 사용할 수 있는 옵션 목록입니다.

옵션	타입	설명
el	HTMLElement	StepGuide가 적용될 HTML 요소입니다.
options	Object	StepGuide의 설정 옵션을 포함하는 객체입니다.
steps	Array<Step>	가이드의 각 단계를 정의하는 배열입니다. 각 단계는 `element`, `title`, `description` 등의 속성을 가집니다.
useAnimation	boolean	애니메이션 효과를 사용할지 여부를 설정합니다. 기본값은 `true`입니다.
buttonLabel	ButtonLabel	버튼의 라벨을 설정합니다. `ButtonLabel` 타입은 `{ next: string; prev: string; skip: string; }` 형태로 정의됩니다.
clickableDim	boolean	배경을 클릭할 수 있도록 설정합니다. 기본값은 `false`입니다. `false`일 경우, 배경을 클릭하면 StepGuide가 닫힙니다.
hideSkip	boolean	건너뛰기 버튼을 숨길지 여부를 설정합니다. 기본값은 `true`입니다.
hideStepCount	boolean	단계 수를 숨길지 여부를 설정합니다. 기본값은 `true`입니다.
onExit	function	종료 후 callback function을 설정 합니다.

Step Option

옵션	타입	설명
element	HTMLElement \| string \| null	StepGuide가 적용될 HTML 요소입니다. 문자열로 CSS 선택자를 전달하거나 직접 HTMLElement를 전달할 수 있습니다. null인 경우 중앙에 요소가 생성됩니다.
title	string	해당 단계의 제목을 설정합니다. 필수 속성입니다.
description	string	해당 단계의 설명을 설정합니다. 선택적 속성입니다.
position	'right' \| 'bottom'	툴팁이 표시될 위치를 설정합니다. 'right'는 요소의 오른쪽, 'bottom'은 요소의 아래쪽에 표시됩니다. 기본값은 'bottom'입니다.
customStyle	Record<string, string>	요소에 적용할 커스텀 CSS 스타일을 설정합니다. CSS 속성과 값의 객체 형태로 전달합니다.
isFixed	boolean	요소의 위치를 고정할지 여부를 설정합니다. 선택적 속성입니다.

예시

다음은 StepGuide 옵션을 사용한 예시입니다:

const guide = stepGuide({
  el: document.body,
  options: {
    onExit: () => {
      console.log('종료 완료');
    },
    steps: [
      {
        element: '#first-step',
        title: '첫 번째 단계',
        description: '이것은 첫 번째 단계입니다.',
      },
    ],
    useAnimation: true,
    buttonLabel: {
      next: '다음',
      prev: '이전',
      skip: '건너뛰기',
    },
    clickableDim: false,
    viewStepCount: true,
    hideSkip: false,
    hideStepCount: false,
  },
});

이 문서를 통해 StepGuide의 옵션을 이해하고 활용할 수 있습니다.

Step Option​

예시​

Step Option

예시