Needless UI

Componentes

Tour

Um card para cada etapa, ao lado do que ela explica, com a página escurecida em volta.

Importação

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

NuiTour

Um tour guiado.

Seletor
nui-tour
NomeTipoPadrãoDescrição
stepsInputNuiTourStep[][]As etapas, em ordem.
openBidirecionalbooleanfalseSe o tour está ativo.
stepBidirecionalnumber0A etapa exibida, a partir de 0.
labelsInputPartial<NuiTourLabels>Todo texto que ele mostra, para traduzir.
finishedOutputvoidEmite quando a última etapa é concluída.
dismissedOutputnumberEmite a etapa em que o tour terminou, quando ele termina antes da hora.
startMétodo(from?: number) => voidInicia o tour, na primeira etapa ou na indicada.
endMétodo(finished: boolean) => voidEncerra o tour, como concluído ou dispensado.

NuiTourStep

Uma etapa do tour.

NomeTipoPadrãoDescrição
targetPropriedadestring | Element | (() => Element | null)O elemento para o qual ela aponta. Sem alvo, o card aparece no meio.
titlePropriedadestringO título do card.
contentPropriedadestring | TemplateRefO texto dele, ou um template.
sidePropriedade'top' | 'bottom' | 'start' | 'end''bottom'De que lado do alvo o card fica.
alignPropriedade'start' | 'center' | 'end''center'Como o card se alinha ao alvo.
paddingPropriedadenumber8Espaço em volta do alvo em destaque, em pixels.
interactivePropriedadebooleanfalseO alvo pode ser usado enquanto o card está aberto.
beforeShowPropriedade() => void | Promise<void>Roda antes de a etapa aparecer. Se retornar uma promise, o tour espera por ela.