> ## 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.

# ドロワー

> YiDA のドロワーコンポーネントの使い方を解説します。表示位置・表示制御・コンテンツ設定を理解することで、現在のページから離れずに補助的な操作を行える UI を構築できます。

## 使用シーン

ドロワーは補助ウィンドウとして機能し、メインの作業フローを中断せずに、簡単な操作の実行・情報の確認・フィードバックの閲覧を素早く行えるようにします。

## コンポーネント例

## コンポーネントのプロパティ

| 属性              | 説明                                                                                               | タイプ                                                     | デフォルト            |
| --------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------- | ---------------- |
| `afterClose`    | ドロワーを閉じた後にトリガーされるイベント。                                                                           | `() => void`                                            | -                |
| `afterOpen`     | ドロワーを開いた後にトリガーされるイベント。                                                                           | `() => void`                                            | -                |
| `cancelText`    | キャンセルボタンのテキスト。                                                                                   | `string`                                                | `'Cancel'`       |
| `closeable`     | ドロワーの閉じ方。`esc`：ESC キーで閉じます。`mask`：マスクをクリックして閉じます。                                                | `'esc' \| 'mask'`                                       | `'esc'`          |
| `confirmState`  | 確認ボタンの状態。                                                                                        | `'NORMAL' \| 'DISABLED' \| 'LOADING'`                   | `'NORMAL'`       |
| `confirmStyle`  | 確認ボタンのタイプ。**ボタン** コンポーネントの [ドキュメント](/ja/open/yida/components/basic/button#コンポーネントの属性) を参照してください。 | `'primary' \| 'warning' \| 'ghostLight' \| 'ghostDark'` | `'primary'`      |
| `confirmText`   | 確認ボタンのテキスト。                                                                                      | `string`                                                | `'Confirm'`      |
| `footer`        | フッターボタンを表示するかどうか。                                                                                | `boolean`                                               | `true`           |
| `footerActions` | フッターボタンのデフォルト配置。`cancel` はキャンセルボタン、`ok` は確認ボタンを表します。                                             | `'cancel,ok' \| 'cancel,ok' \| 'ok' \| 'cancel'`        | `'cancel,ok'`    |
| `footerAlign`   | ドロワー内の確認ボタンとキャンセルボタンの配置。                                                                         | `'left' \| 'center' \| 'right'`                         | `'right'`        |
| `hasMask`       | マスクを表示するかどうか。                                                                                    | `boolean`                                               | `true`           |
| `height`        | ドロワーの高さ。                                                                                         | `number`                                                | -                |
| `onCancel`      | キャンセルボタンをクリックした際にトリガーされるイベント。                                                                    | `() => void`                                            | -                |
| `onClose`       | ドロワーを閉じた際にトリガーされるイベント。                                                                           | `() => void`                                            | -                |
| `onOk`          | 確認ボタンをクリックした際にトリガーされるイベント。                                                                       | `() => void`                                            | -                |
| `placement`     | ドロワーの表示位置。                                                                                       | `'right' \| 'top' \| 'bottom' \| 'left'`                | `'right'`        |
| `title`         | ドロワーのタイトル。                                                                                       | `string`                                                | `'Drawer Title'` |
| `visible`       | ドロワーを表示するかどうか。                                                                                   | `boolean`                                               | `false`          |
| `width`         | ドロワーの幅。                                                                                          | `number`                                                | -                |