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

> Dokumentasi komponen Drawer di YiDA. Pelajari cara mengatur penempatan, mengontrol visibilitas, dan mengonfigurasi konten untuk menampilkan aksi tambahan tanpa meninggalkan halaman saat ini.

## Kapan digunakan

Drawer adalah jendela tambahan yang memungkinkan pengguna melakukan aksi sederhana, mengonfirmasi informasi, atau meninjau masukan dengan cepat tanpa meninggalkan alur kerja utama.

## Contoh komponen

## Properti komponen

| Atribut         | Deskripsi                                                                                                                 | Tipe                                                    | Default          |
| --------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ---------------- |
| `afterClose`    | Peristiwa yang dipicu setelah drawer ditutup.                                                                             | `() => void`                                            | -                |
| `afterOpen`     | Peristiwa yang dipicu setelah drawer dibuka.                                                                              | `() => void`                                            | -                |
| `cancelText`    | Teks tombol Batal.                                                                                                        | `string`                                                | `'Batal'`        |
| `closeable`     | Cara menutup dialog. `esc`: tutup dengan menekan tombol ESC. `mask`: tutup dengan mengklik mask.                          | `'esc' \| 'mask'`                                       | `'esc'`          |
| `confirmState`  | Status tombol Konfirmasi.                                                                                                 | `'NORMAL' \| 'DISABLED' \| 'LOADING'`                   | `'NORMAL'`       |
| `confirmStyle`  | Tipe tombol Konfirmasi. Lihat [dokumentasi](/id/open/yida/components/basic/button#properti-komponen) komponen **Button**. | `'primary' \| 'warning' \| 'ghostLight' \| 'ghostDark'` | `'primary'`      |
| `confirmText`   | Teks tombol Konfirmasi.                                                                                                   | `string`                                                | `'Konfirmasi'`   |
| `footer`        | Apakah tombol footer ditampilkan.                                                                                         | `boolean`                                               | `true`           |
| `footerActions` | Susunan default tombol footer. `cancel` mewakili tombol Batal, sedangkan `ok` mewakili tombol Konfirmasi.                 | `'cancel,ok' \| 'cancel,ok' \| 'ok' \| 'cancel'`        | `'cancel,ok'`    |
| `footerAlign`   | Perataan tombol Konfirmasi dan Batal di dalam dialog.                                                                     | `'left' \| 'center' \| 'right'`                         | `'right'`        |
| `hasMask`       | Apakah mask ditampilkan.                                                                                                  | `boolean`                                               | `true`           |
| `height`        | Tinggi drawer.                                                                                                            | `number`                                                | -                |
| `onCancel`      | Peristiwa yang dipicu saat tombol Batal diklik.                                                                           | `() => void`                                            | -                |
| `onClose`       | Peristiwa yang dipicu saat drawer ditutup.                                                                                | `() => void`                                            | -                |
| `onOk`          | Peristiwa yang dipicu saat tombol Konfirmasi diklik.                                                                      | `() => void`                                            | -                |
| `placement`     | Penempatan drawer.                                                                                                        | `'right' \| 'top' \| 'bottom' \| 'left'`                | `'right'`        |
| `title`         | Judul drawer.                                                                                                             | `string`                                                | `'Judul Drawer'` |
| `visible`       | Apakah drawer terlihat.                                                                                                   | `boolean`                                               | `false`          |
| `width`         | Lebar drawer.                                                                                                             | `number`                                                | -                |