> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Dialog

> YiDA の Dialog コンポーネントのプロパティ設定について解説します。開閉制御、サイズ指定、アクションエリアなどの構成方法を紹介し、情報確認や軽量な操作を実装する際の参考としてご活用ください。

## 使用シーン

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 コンポーネントドキュメント](/ja/open/yida/components/basic/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`                                                | -               |