API ของ Dialog · Needless UI

Import

import-dialog.ts

import {
  NuiDialog,
  NuiDialogActions,
  NuiDialogClose,
  NuiDialogDescription,
  NuiDialogTitle,
} from '@needless-ui/angular/dialog';

NuiDialog

เปลี่ยน <dialog> แบบเนทีฟให้เป็นไดอะล็อกของ Needless UI

Selector: dialog[nuiDialog]
Export เป็น: nuiDialog

NuiDialog: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`open`สองทาง	`boolean`	`false`	ไดอะล็อกเปิดอยู่หรือไม่ ผูกค่าด้วย `[(open)]`
`modal`Input	`boolean`	`true`	เปิดแบบโมดัล มีพื้นหลังทึบ และหน้าเว็บด้านหลังใช้งานไม่ได้
`dismissible`Input	`boolean`	`true`	การกด Esc และการคลิกพื้นหลังจะปิดไดอะล็อกหรือไม่
`size`Input	`'sm' \| 'md' \| 'lg'`	`'md'`	ความกว้างสูงสุด: `sm` (24rem) `md` (32rem) หรือ `lg` (44rem)
`enter`Input	`NuiEnter`		ลักษณะการปรากฏ: `zoom` `fade` `drop` `rise` `unfold` `flip` `swing` `slide` หรือ `none`
`motion`Input	`NuiMotion`		สปริงที่ใช้ในการเคลื่อนไหว: `snappy` `bouncy` `jelly` `elastic` `lazy` `mechanical` หรือ `none`
`spring`Input	`NuiSpring`		สปริงแบบใดก็ได้ในรูป `{ stiffness, damping, mass }` ซึ่งจะคอมไพล์เป็น CSS ขณะรันไทม์ และใช้แทน `motion`
`corners`Input	`NuiCorners`		รูปทรงของมุม: `round` `squircle` `bevel` `scoop` `notch` หรือ `square`
`radius`Input	`NuiRadius`		ขนาดของมุม: `none` `small` `medium` `large` หรือ `full`
`density`Input	`NuiDensity`		พื้นที่ที่ใช้: `compact` `regular` หรือ `roomy`
`closed`Output	`string`		ส่งค่าผลลัพธ์ออกมาทุกครั้งที่ไดอะล็อกปิด ค่าจะว่างหากไดอะล็อกถูกปิดทิ้งโดยไม่ได้เลือก
`close`เมธอด	`(returnValue?: string) => void`		ปิดไดอะล็อก โดยจะระบุค่าผลลัพธ์ด้วยก็ได้

Input สำหรับการปรับแต่งที่ไม่ได้กำหนดค่าไว้ จะใช้ค่าตาม attribute data-nui-* ที่อยู่ใกล้ที่สุด ดูคู่มือการปรับแต่ง

NuiDialogTitle

หัวเรื่องของไดอะล็อก จะได้รับ id และใช้เป็น aria-labelledby ของไดอะล็อก

Selector: [nuiDialogTitle]

NuiDialogDescription

คำอธิบายสั้น ๆ ที่ aria-describedby ของไดอะล็อกอ้างอิงถึง

Selector: [nuiDialogDescription]

NuiDialogActions

แถวปุ่มที่ด้านล่างของไดอะล็อก จัดชิดด้านท้าย

Selector: [nuiDialogActions]

NuiDialogClose

ปิดไดอะล็อกที่ครอบอยู่เมื่อถูกคลิก

Selector: [nuiDialogClose]

NuiDialogClose: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`nuiDialogClose`Input	`string`	`''`	ค่าที่ใช้ปิดไดอะล็อก ซึ่งจะส่งออกมาทาง `(closed)`