Komponen / Tata letak
Drawer
Panel inspector di kanan yang menyatu dengan layar: ringkasan record terpilih, filter lanjutan, atau form singkat. Mode inline untuk slot inspector SplitView, mode overlay untuk layar sempit atau aksi sementara.
Import
tsx
import { Drawer } from '@divistant/circca-react';Props · Drawer
Juga menerima atribut elemen panel. Inline merender <aside aria-labelledby>; overlay merender Radix Dialog.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | — | Judul panel (properti Figma "Title"), mis. nomor dokumen. |
| subtitle | ReactNode | — | Keterangan singkat (properti Figma "Subtitle"). |
| children | ReactNode | — | Isi panel (properti Figma "Content"), bergulir sendiri. |
| footer | ReactNode | — | Tombol kanan bawah (properti Figma "Footer"): Secondary lalu Primary. Bungkus tombol batal dengan <Drawer.Close>. |
| size | 'md' | 'lg' | 'md' | Medium 320 px / Large 400 px. |
| mode | 'inline' | 'overlay' | 'inline' | Inline = menyatu dengan layar; overlay = panel modal di tepi kanan. Di SplitView sempit otomatis overlay. |
| closeButton | boolean | true | Tombol tutup (×) di kanan atas. |
| closeLabel | string | 'Tutup panel' | Label aksesibel tombol tutup. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Status terbuka. Bawaan: inline terbuka, overlay tertutup. Inline dengan open={false} tidak dirender. |
| trigger | ReactElement | — | Pemicu untuk mode overlay, mis. <Button>Filter</Button>. |
| titleAs | 'h2' | 'h3' | 'h4' | 'h2' | Tingkat judul pada mode inline. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · Drawer.Close
Membungkus satu elemen (mis. <Button>Batal</Button>) yang menutup panel tanpa aksi, di mode inline maupun overlay.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| children | ReactElement | — | Tombol penutup. |
Sumber
Kode komponen ada di packages/react/src/components/drawer. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.