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)` 发出。