Dialog - DingTalk Help Center

使用シーン

Dialog は補助的なウィンドウです。ユーザーはメイン画面を離れることなく、簡単な操作や情報確認、フィードバックの受け取りをすばやく行えます。

コンポーネント例

コンポーネントの属性

属性	説明	タイプ	デフォルト
`afterClose`	Dialog が閉じられた後にトリガーされるイベント。	`() => void`	-
`afterOpen`	Dialog が開かれた後にトリガーされるイベント。	`() => void`	-
`autoFocus`	自動フォーカス。Dialog が開いた際に、内部のフォームフィールドへ自動でフォーカスを当てるかどうかを指定します。	`真偽値`	`true`
`cancelText`	キャンセルボタンのテキスト。	`文字列`	`'キャンセル'`
`closeable`	Dialog の閉じ方。`esc`: ESC キーを押して閉じる。`mask`: マスク部分をクリックして閉じる。	`'esc' \| 'mask'`	`'esc'`
`confirmState`	確認ボタンの状態。	`'NORMAL' \| 'DISABLED' \| 'LOADING'`	`'NORMAL'`
`confirmStyle`	確認ボタンのスタイル。詳細は Button コンポーネントドキュメントを参照してください。	`'primary' \| 'warning' \| 'ghostLight' \| 'ghostDark'`	`'primary'`
`confirmText`	確認ボタンのテキスト。	`文字列`	`'確認'`
`footer`	フッターボタンを表示するかどうか。	`真偽値`	`true`
`footerActions`	フッターボタンのデフォルト配置。`cancel` はキャンセルボタン、`ok` は確認ボタンを表します。	`'cancel,ok' \| 'cancel,ok' \| 'ok' \| 'cancel'`	`'cancel,ok'`
`footerAlign`	Dialog 内の確認ボタンとキャンセルボタンの配置。	`'left' \| 'center' \| 'right'`	`'right'`
`hasMask`	マスクを表示するかどうか。	`真偽値`	`true`
`height`	Dialog の高さ。	`number`	-
`onCancel`	キャンセルボタンをクリックした際にトリガーされるイベント。	`() => void`	-
`onClose`	Dialog が閉じられた際にトリガーされるイベント。	`() => void`	-
`onOk`	確認ボタンをクリックした際にトリガーされるイベント。	`() => void`	-
`onOpen`	Dialog が開かれた際にトリガーされるイベント。	`() => void`	-
`title`	Dialog のタイトル。	`文字列`	`'Dialog タイトル'`
`visible`	Dialog を表示するかどうか。	`真偽値`	`false`
`width`	Dialog の幅。	`number`	-