Needless UI

コンポーネント

Dialog

ネイティブの dialog 要素を使ったモーダルウィンドウ。フォーカスはブラウザーが管理します。

インポート

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

NuiDialog

ネイティブの <dialog> を Needless UI のダイアログに変えます。

セレクター
dialog[nuiDialog]
エクスポート名
nuiDialog
名前型デフォルト説明
open双方向booleanfalseダイアログが開いているかどうか。[(open)] でバインドします。
modal入力booleantrue背景を表示し、背後のページを操作できない状態にして、モーダルとして開きます。
dismissible入力booleantrueEsc キーや背景のクリックでダイアログを閉じるかどうか。
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-* 属性に従います。詳しくはカスタマイズガイドをご覧ください。

NuiDialogTitle

ダイアログのタイトル。id が付与され、ダイアログの aria-labelledby として使われます。

セレクター
[nuiDialogTitle]

NuiDialogDescription

短い説明文。ダイアログの aria-describedby から参照されます。

セレクター
[nuiDialogDescription]

NuiDialogActions

ダイアログ下部に並ぶボタンの行。末尾側に揃えて配置されます。

セレクター
[nuiDialogActions]

NuiDialogClose

クリックすると、それを含むダイアログを閉じます。

セレクター
[nuiDialogClose]
名前型デフォルト説明
nuiDialogClose入力string''ダイアログを閉じるときの値。(closed) から出力されます。