Needless UI

Komponenten

Tour

Eine Karte pro Schritt, neben dem, worum es geht, und die Seite drumherum abgedunkelt.

Import

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

NuiTour

Eine geführte Tour.

Selektor
nui-tour
NameTypStandardwertBeschreibung
stepsInputNuiTourStep[][]Die Schritte, der Reihe nach.
openTwo-WaybooleanfalseOb die Tour läuft.
stepTwo-Waynumber0Der angezeigte Schritt, ab 0 gezählt.
labelsInputPartial<NuiTourLabels>Alle Texte, die sie anzeigt, zum Übersetzen.
finishedOutputvoidEmittiert, wenn der letzte Schritt erledigt ist.
dismissedOutputnumberEmittiert den Schritt, bei dem die Tour vorzeitig endete.
startMethode(from?: number) => voidStartet die Tour, ab dem ersten oder dem angegebenen Schritt.
endMethode(finished: boolean) => voidBeendet die Tour, als abgeschlossen oder abgebrochen.

NuiTourStep

Ein Schritt der Tour.

NameTypStandardwertBeschreibung
targetEigenschaftstring | Element | (() => Element | null)Worauf er zeigt. Ohne Ziel erscheint die Karte in der Mitte.
titleEigenschaftstringDer Titel der Karte.
contentEigenschaftstring | TemplateRefDer Text der Karte oder ein Template.
sideEigenschaft'top' | 'bottom' | 'start' | 'end''bottom'Auf welcher Seite des Ziels die Karte erscheint.
alignEigenschaft'start' | 'center' | 'end''center'Wie die Karte am Ziel ausgerichtet ist.
paddingEigenschaftnumber8Abstand um das Ziel im Spotlight, in Pixeln.
interactiveEigenschaftbooleanfalseDas Ziel lässt sich benutzen, während die Karte offen ist.
beforeShowEigenschaft() => void | Promise<void>Läuft, bevor der Schritt erscheint. Auf ein zurückgegebenes Promise wartet die Tour.