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，導覽會等待它完成。