Needless UI

Komponen

Tur tuntunan

Kertu kanggo saben langkah ing sandhinge perangan sing diterangake, lan kaca ing sakubenge dadi surem.

Import

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

NuiTour

Tur tuntunan.

Selector
nui-tour
JenengJinisGawanKatrangan
stepsInputNuiTourStep[][]Langkah-langkah, miturut urutan.
openRong arahbooleanfalseApa tur lagi mlaku.
stepRong arahnumber0Langkah sing ditampilake, wiwit 0.
labelsInputPartial<NuiTourLabels>Saben teks sing ditampilake tur, kanggo diterjemahake.
finishedOutputvoidNgetokake nalika langkah pungkasan rampung.
dismissedOutputnumberNgetokake langkah panggonane tur mandheg, yen tur rampung luwih dhisik.
startMetode(from?: number) => voidMiwiti tur, saka langkah kapisan utawa saka langkah sing diwenehake.
endMetode(finished: boolean) => voidMungkasi tur, minangka rampung utawa diilangi.

NuiTourStep

Siji langkah ing tur.

JenengJinisGawanKatrangan
targetPropertistring | Element | (() => Element | null)Apa sing dituding. Tanpa target, kertu katon ing tengah.
titlePropertistringJudhul kertu.
contentPropertistring | TemplateRefTeks-e, utawa template.
sideProperti'top' | 'bottom' | 'start' | 'end''bottom'Sisih target panggonane kertu.
alignProperti'start' | 'center' | 'end''center'Kepriye jejere kertu karo target.
paddingPropertinumber8Jarak ing sakubenge target sajrone sorotan, ing piksel.
interactivePropertibooleanfalseTarget bisa dienggo sajrone kertu katon.
beforeShowProperti() => void | Promise<void>Mlaku sadurunge langkah katon. Tur ngenteni promise.