ガイドツアーの API

インポート

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`		ツアーを、完了または中断として終了します。

ツアーの1ステップ。

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>`		ステップを表示する前に実行されます。Promise を返すと、ツアーはその完了を待ちます。