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

# Drawer コンポーネント

> YiDA のカスタムページで Drawer コンポーネントを追加・設定する方法を解説します。エディション対応状況、ユースケース、動画デモ、API による表示制御まで、ドロワーの基本的な使い方をわかりやすく紹介します。

| **機能**         | **無料版** | **ベーシック版** | **プロフェッショナル版** | **専用版** |
| -------------- | ------- | ---------- | -------------- | ------- |
| Drawer コンポーネント | 非対応     | 非対応        | 対応             | 対応      |

## 1. ユースケース

* ユーザーへのプロンプト表示。
* ユーザーへの操作確認。
* 作業フローを中断せず、画面遷移なしでユーザーがタスクを処理できるようにする。

<Note>
  コンポーネントの属性、使用方法、および例については、[**こちらのドキュメント**](/ja/open/yida/components/basic/drawer)をご参照ください。
</Note>

## 3. Drawer コンポーネントの基本的な使い方

### 3.1 Drawer コンポーネントをカスタムページにドラッグし、属性パネルでスタイルを設定

カスタムページ

### 3.2 Drawer コンポーネントはデフォルトで非表示。以下の API を使用して表示

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function showDrawer() {
  this.$('drawer1').show();
}
```

**例:**

Button コンポーネントにクリックイベントを追加し、ボタンをクリックすると Drawer コンポーネントが表示されるようにします。

結果:

### 3.3 属性パネルで高さと幅を指定してドロワーのサイズを制御し、表示位置と閉じ方を設定

以下のとおりです:

### 3.4 下部ボタンの位置、配置、コンテンツ、アクションイベントを設定

以下のとおりです: