Needless UI

组件

漫游式引导

为每个步骤显示一张卡片，放在它所介绍的内容旁边，并调暗周围的页面。

导入

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

NuiTour

一个漫游式引导。

选择器
nui-tour
名称类型默认值说明
steps输入NuiTourStep[][]按顺序排列的步骤。
open双向绑定booleanfalse引导是否正在进行。
step双向绑定number0当前显示的步骤，从 0 开始。
labels输入Partial<NuiTourLabels>它显示的所有文本，供翻译使用。
finished输出void完成最后一步时发出。
dismissed输出number引导提前结束时，发出结束时所在的步骤。
start方法(from?: number) => void开始引导，从第一步或指定的步骤开始。
end方法(finished: boolean) => void结束引导，并标记为完成或中途退出。

NuiTourStep

引导中的一个步骤。

名称类型默认值说明
target属性string | Element | (() => Element | null)步骤所指向的对象。没有目标时，卡片显示在中央。
title属性string卡片的标题。
content属性string | TemplateRef卡片的文本，或一个模板。
side属性'top' | 'bottom' | 'start' | 'end''bottom'卡片位于目标的哪一侧。
align属性'start' | 'center' | 'end''center'卡片与目标的对齐方式。
padding属性number8聚光灯中目标周围留出的空间，单位为像素。
interactive属性booleanfalse卡片显示期间，目标仍可操作。
beforeShow属性() => void | Promise<void>在步骤显示之前运行。如果返回 Promise，引导会等待它完成。