가이드 투어 API · Needless UI

가져오기

import-tour.ts

import { NuiTour, type NuiTourStep } from '@needless-ui/angular/tour';

가이드 투어입니다.

NuiTour: 속성
이름	타입	기본값	설명
`steps`입력	`NuiTourStep[]`	`[]`	단계 목록. 순서대로 나열합니다.
`open`양방향	`boolean`	`false`	투어가 진행 중인지 여부.
`step`양방향	`number`	`0`	표시된 단계. 0부터 셉니다.
`labels`입력	`Partial<NuiTourLabels>`		투어가 표시하는 모든 텍스트. 번역할 때 사용합니다.
`finished`출력	`void`		마지막 단계를 마치면 내보냅니다.
`dismissed`출력	`number`		투어가 중간에 끝나면, 끝난 시점의 단계를 내보냅니다.
`start`메서드	`(from?: number) => void`		투어를 시작합니다. 첫 단계 또는 지정한 단계부터 시작합니다.
`end`메서드	`(finished: boolean) => void`		투어를 끝냅니다. 완료 또는 중단으로 끝낼 수 있습니다.

투어의 한 단계입니다.

NuiTourStep: 속성
이름	타입	기본값	설명
`target`속성	`string \| Element \| (() => Element \| null)`		단계가 가리키는 대상. 없으면 카드가 가운데에 표시됩니다.
`title`속성	`string`		카드의 제목.
`content`속성	`string \| TemplateRef`		카드의 텍스트 또는 템플릿.
`side`속성	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	대상의 어느 쪽에 카드를 놓을지.
`align`속성	`'start' \| 'center' \| 'end'`	`'center'`	카드를 대상과 어떻게 정렬할지.
`padding`속성	`number`	`8`	스포트라이트 안에서 대상 주위에 두는 여백(픽셀 단위).
`interactive`속성	`boolean`	`false`	카드가 떠 있는 동안에도 대상을 사용할 수 있습니다.
`beforeShow`속성	`() => void \| Promise<void>`		단계가 표시되기 전에 실행됩니다. 프로미스를 반환하면 투어가 기다립니다.