Import
import { NuiTour, type NuiTourStep } from '@needless-ui/angular/tour';NuiTour
Tour แนะนำการใช้งาน
| ชื่อ | ชนิด | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
stepsInput | NuiTourStep[] | [] | ขั้นตอนต่าง ๆ เรียงตามลำดับ |
openสองทาง | boolean | false | Tour กำลังทำงานอยู่หรือไม่ |
stepสองทาง | number | 0 | ขั้นตอนที่แสดงอยู่ เริ่มนับจาก 0 |
labelsInput | Partial<NuiTourLabels> | ข้อความทุกส่วนที่แสดง สำหรับการแปล | |
finishedOutput | void | ส่งค่าออกมาเมื่อขั้นตอนสุดท้ายเสร็จสิ้น | |
dismissedOutput | number | ส่งขั้นตอนที่ Tour จบลงออกมา เมื่อ Tour จบก่อนกำหนด | |
startเมธอด | (from?: number) => void | เริ่ม Tour จากขั้นตอนแรก หรือจากขั้นตอนที่ระบุ | |
endเมธอด | (finished: boolean) => void | จบ Tour โดยนับว่าเสร็จสิ้นหรือถูกยกเลิก |
NuiTourStep
ขั้นตอนหนึ่งของ Tour
| ชื่อ | ชนิด | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
targetพร็อพเพอร์ตี | string | Element | (() => Element | null) | สิ่งที่ขั้นตอนชี้ไป หากไม่มี การ์ดจะแสดงตรงกลาง | |
titleพร็อพเพอร์ตี | string | หัวเรื่องของการ์ด | |
contentพร็อพเพอร์ตี | string | TemplateRef | ข้อความของการ์ด หรือเทมเพลต | |
sideพร็อพเพอร์ตี | 'top' | 'bottom' | 'start' | 'end' | 'bottom' | ด้านของเป้าหมายที่การ์ดจะไปอยู่ |
alignพร็อพเพอร์ตี | 'start' | 'center' | 'end' | 'center' | วิธีจัดแนวการ์ดให้ตรงกับเป้าหมาย |
paddingพร็อพเพอร์ตี | number | 8 | ระยะเว้นรอบเป้าหมายภายในสปอตไลต์ หน่วยเป็นพิกเซล |
interactiveพร็อพเพอร์ตี | boolean | false | ใช้งานเป้าหมายได้ขณะที่การ์ดแสดงอยู่ |
beforeShowพร็อพเพอร์ตี | () => void | Promise<void> | ทำงานก่อนที่ขั้นตอนจะแสดง หากคืนค่าเป็น promise Tour จะรอจนเสร็จ |