Dialog API · Needless UI

匯入

import-dialog.ts

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

將原生的 <dialog> 變成 Needless UI 對話框。

NuiDialog: 屬性
名稱	型別	預設值	說明
`open`雙向繫結	`boolean`	`false`	對話框是否開啟。使用 `[(open)]` 進行繫結。
`modal`輸入	`boolean`	`true`	以強制回應方式開啟，顯示背景遮罩，並讓後方頁面無法互動。
`dismissible`輸入	`boolean`	`true`	按 Esc 鍵或點擊背景遮罩時是否關閉對話框。
`size`輸入	`'sm' \| 'md' \| 'lg'`	`'md'`	最大寬度：`sm`（24rem）、`md`（32rem）或 `lg`（44rem）。
`enter`輸入	`NuiEnter`		進場方式：`zoom`、`fade`、`drop`、`rise`、`unfold`、`flip`、`swing`、`slide` 或 `none`。
`motion`輸入	`NuiMotion`		運動時使用的彈簧：`snappy`、`bouncy`、`jelly`、`elastic`、`lazy`、`mechanical` 或 `none`。
`spring`輸入	`NuiSpring`		任意彈簧，以 `{ stiffness, damping, mass }` 的形式指定，在執行階段編譯成 CSS。它會覆寫 `motion`。
`corners`輸入	`NuiCorners`		邊角的形狀：`round`、`squircle`、`bevel`、`scoop`、`notch` 或 `square`。
`radius`輸入	`NuiRadius`		邊角的大小：`none`、`small`、`medium`、`large` 或 `full`。
`density`輸入	`NuiDensity`		佔用的空間：`compact`、`regular` 或 `roomy`。
`closed`輸出	`string`		每次對話框關閉時發出回傳值；如果對話框未經選擇就被關閉，該值為空。
`close`方法	`(returnValue?: string) => void`		關閉對話框，可附帶一個回傳值。

用於客製化的輸入屬性如果未設定，會沿用最近的 data-nui-* 屬性。詳見客製化指南。

對話框的標題。它會取得一個 id，並作為對話框的 aria-labelledby。

一段簡短的描述，由對話框的 aria-describedby 參照。

位於對話框底部的一列按鈕，向結尾端對齊。

點擊時關閉所在的對話框。

NuiDialogClose: 屬性
名稱	型別	預設值	說明
`nuiDialogClose`輸入	`string`	`''`	對話框關閉時攜帶的值，由 `(closed)` 發出。