Needless UI

Mga component

Tour

Isang card para sa bawat step, katabi ng tinutukoy nito, habang naka-dim ang natitirang bahagi ng page.

Import

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

NuiTour

Isang guided tour.

Selector
nui-tour
PangalanUriDefaultPaglalarawan
stepsInputNuiTourStep[][]Ang mga step, ayon sa pagkakasunod.
openTwo-waybooleanfalseKung tumatakbo ang tour.
stepTwo-waynumber0Ang step na ipinapakita, mula sa 0.
labelsInputPartial<NuiTourLabels>Bawat text na ipinapakita nito, para maisalin.
finishedOutputvoidNagfa-fire kapag tapos na ang huling step.
dismissedOutputnumberInilalabas ang step kung saan natapos ang tour, kapag maaga itong natapos.
startMethod(from?: number) => voidSinisimulan ang tour, mula sa unang step o sa step na ibinigay.
endMethod(finished: boolean) => voidTinatapos ang tour, bilang natapos o na-dismiss.

NuiTourStep

Isang step ng tour.

PangalanUriDefaultPaglalarawan
targetPropertystring | Element | (() => Element | null)Kung saan ito tumuturo. Kapag wala, lumalabas ang card sa gitna.
titlePropertystringAng title ng card.
contentPropertystring | TemplateRefAng text nito, o isang template.
sideProperty'top' | 'bottom' | 'start' | 'end''bottom'Kung saang gilid ng target pupunta ang card.
alignProperty'start' | 'center' | 'end''center'Kung paano pumapantay ang card sa target.
paddingPropertynumber8Ang espasyo sa paligid ng target sa spotlight, sa pixel.
interactivePropertybooleanfalseMagagamit ang target habang nakabukas ang card.
beforeShowProperty() => void | Promise<void>Tumatakbo bago lumabas ang step. Naghihintay ang tour sa isang promise.