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

# Komponen Drawer

> Tutorial komponen Drawer di YiDA — pelajari edisi yang mendukung, kasus penggunaan, demo video, serta cara menambahkan dan mengonfigurasi Drawer pada halaman kustom serta mengontrol tampilannya melalui API.

| **Fitur**       | **Edisi Gratis** | **Edisi Basic** | **Edisi Professional** | **Edisi Dedicated** |
| --------------- | ---------------- | --------------- | ---------------------- | ------------------- |
| Komponen Drawer | Tidak didukung   | Tidak didukung  | Didukung               | Didukung            |

## 1. Kasus penggunaan

* Menampilkan prompt kepada Pengguna.
* Meminta Pengguna untuk mengonfirmasi suatu tindakan.
* Memungkinkan Pengguna menangani tugas tanpa berpindah Halaman dan mengganggu alur kerja.

<Note>
  Untuk Atribut Komponen, cara penggunaan, dan Contoh, [**klik di sini**](/id/open/yida/components/basic/drawer).
</Note>

## 3. Penggunaan dasar Komponen Drawer

### 3.1 Seret Komponen Drawer ke halaman kustom dan Konfigurasikan gayanya di panel Atribut

halaman kustom

### 3.2 Komponen Drawer disembunyikan secara default. Gunakan API berikut untuk menampilkannya

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

**Contoh:**

Tambah peristiwa klik pada Komponen Button sehingga mengklik tombol tersebut akan menampilkan Komponen Drawer.

Hasil:

### 3.3 Atur tinggi dan lebar di panel Atribut untuk mengontrol ukuran Drawer, serta Konfigurasikan posisi tampil dan metode keluar

Seperti ditunjukkan di bawah ini:

### 3.4 Konfigurasikan tombol di bagian bawah untuk mengatur posisi, susunan, konten, dan peristiwa tindakannya

Seperti ditunjukkan di bawah ini: