@ncds/step-guide
v1.0.0
Published
nhn-commerce의 스텝 가이드 컴포넌트입니다.
Maintainers
nhn-commerce-feReadme
COMMERCE GUIDE 사용법
Import
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
...
<link href="{commerce guide 경로}/commerce-guide.css" rel="stylesheet" />
</head>
<body>
<script src="{commerce guide 경로}/commerceGuide.js" />
</body>
</html>NPM (React, Vue 공용)
npm install @ncds/step-guideimport stepGuide from '@ncds/step-guide';
import { uiClassName } from '@ncds/step-guide';
import '@ncds/step-guide/dist/lib/step-guide.min.css';인터페이스
const option = {
el?: document.body
useAnimation?: boolean, // default true
steps: [
{ // step 1
title?: 'Title',
description?: 'Description',
element?: document.querySelector('#section')
},
{ // step 2
description?: '<p>This is a paragraph</p>',
element?: '#article'
},
{ // step 3
title?: 'Title', // 툴팁 제목
description?: 'Description', // 툴팁 내용
element?: document.querySelector('#section') // highlight 될 요소
},
]
};
commerceGuide(option);
API
commerceGuide(option)
Returns: commerceGuide Parameters:
- option: object
- el?: string | HTMLElement
- useAnimation?: boolean (default true)
- buttonLabel?: { prev: string, next: string, done: string },
- steps:
[ { title?: string, description?: string, element?: string | HTMLElement } ... ]
Example:
commerceGuide(option);nextStep()
Example:
const guide = commerceGuide(option);
guide.nextStep();prevStep()
Example:
const guide = commerceGuide(option);
guide.prevStep();Parameter:
- step: number
Example:
const guide = commerceGuide(option);
guide.goToStep(3);exit()
Example:
const guide = commerceGuide(option);
guide.onExit();빌드
- packages/step-guide 디렉토리로 이동
전체 빌드 (lib + vanilla)
yarn build개별 빌드
yarn build:lib # dist/lib/ - ESM 모듈 (stepGuide.mjs + step-guide.min.css)
yarn build:vanilla # dist/vanilla/ - UMD (step-guide.min.js + step-guide.min.css + index.html)CDN 배포 (vanilla용)
yarn build:cdn # dist/ 루트에 step-guide.min.js + step-guide.min.css 빌드 후 검증
yarn publish:cdn # 빌드 + NHN Cloud CDN에 업로드- 배포 경로:
https://fe-sdk.cdn-nhncommerce.com/@ncds/step-guide/{major}.{minor}/ - package.json의 version 기준으로 major.minor 버전이 결정됨
--env=alpha옵션으로 alpha 환경 배포 가능 (경로에/alpha/추가)
local 실행
- packages/step-guide 디렉토리로 이동
yarn dev