API Tur terpandu · Needless UI

Impor

import-tour.ts

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

Tur terpandu.

NuiTour: Properti
Nama	Tipe	Default	Deskripsi
`steps`Input	`NuiTourStep[]`	`[]`	Langkah-langkahnya, sesuai urutan.
`open`Dua arah	`boolean`	`false`	Apakah tur sedang berjalan.
`step`Dua arah	`number`	`0`	Langkah yang ditampilkan, mulai dari 0.
`labels`Input	`Partial<NuiTourLabels>`		Semua teks yang ditampilkannya, untuk diterjemahkan.
`finished`Output	`void`		Terpicu saat langkah terakhir selesai.
`dismissed`Output	`number`		Mengirimkan langkah tempat tur berakhir, jika tur berakhir lebih awal.
`start`Metode	`(from?: number) => void`		Memulai tur, dari langkah pertama atau dari langkah yang diberikan.
`end`Metode	`(finished: boolean) => void`		Mengakhiri tur, sebagai selesai atau dibatalkan.

Satu langkah dalam tur.

NuiTourStep: Properti
Nama	Tipe	Default	Deskripsi
`target`Properti	`string \| Element \| (() => Element \| null)`		Yang ditunjuk langkah ini. Tanpa target, kartu tampil di tengah.
`title`Properti	`string`		Judul kartu.
`content`Properti	`string \| TemplateRef`		Teksnya, atau template.
`side`Properti	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	Sisi target tempat kartu diletakkan.
`align`Properti	`'start' \| 'center' \| 'end'`	`'center'`	Cara kartu disejajarkan dengan target.
`padding`Properti	`number`	`8`	Ruang di sekitar target dalam sorotan, dalam piksel.
`interactive`Properti	`boolean`	`false`	Target bisa digunakan selama kartu tampil.
`beforeShow`Properti	`() => void \| Promise<void>`		Berjalan sebelum langkah ditampilkan. Jika berupa promise, tur menunggunya.