Sheet / BottomSheet

Panel dari bawah layar HP yang berhenti di titik snap dan ditutup dengan geser ke bawah. Dialog, Drawer, menu, dan semua picker kit memakainya di HP, tanpa kode tambahan.

Coba: tarik pegangan ke atas, lalu geser ke bawah untuk menutup.

Pesanan #1041

Teh tarik

Rp 15.000

HP: sheet, footer tetap di bawah

Dengan responsive="sm", layar lebar membuka drawer dari kanan, isinya sama. Di HP tetap sheet.

Sheet di demo ini hidup di dalam frame HP (prop container).

Yang sudah dikerjakan kit

Titik snap. Sheet tidak pernah berhenti di tengah: dilepas pelan ke titik terdekat, dijentik ke titik berikutnya.
Tarik dari mana saja. Pegangan dan judul selalu bisa ditarik. Isi ikut menarik saat sudah di paling atas.
Keyboard di layar. Sheet naik di atas keyboard HP. Field yang difokus tetap terlihat di dalam sheet.
Keyboard fisik. Pegangan adalah tombol: Atas, Bawah, Home, End pindah titik. Esc menutup. Fokus terkunci dan kembali ke pemicu.
Halaman tidak diredupkan. Tepi sheet terlihat lewat garis tipis dan bayangan. Ketuk di luar tetap menutup.

Kode secukupnya

export function ChangeStatus() {
   const [open, setOpen] = useState(false);
   return (
      <BottomSheet
         open={open}
         onOpenChange={setOpen}
         title="Ubah status #1041"
         snapPoints={[0.5, 0.92]}
         responsive="sm"
         footer={<Button onClick={save}>Simpan</Button>}
      >
         <StatusOptions />
      </BottomSheet>
   );
}

Pakai Dialog atau DropdownMenu biasa, dan di HP keduanya sudah jadi sheet sendiri.

Jadi sheet di HP, otomatis

Dialog

size menentukan titik tertinggi: sm 50%, md 75%, lg 92%.

Drawer

Semua sisi jadi sheet bawah. Navigasi bisa tetap geser samping.

DropdownMenu

Jadi action sheet. Menu ditulis sekali untuk dua bentuk.

Picker

ObjectSelect, UserSelect, dan lainnya: daftar pilihan jadi sheet.

Sheet / BottomSheet

Demo

Yang sudah dikerjakan kit

Jadi sheet di HP, otomatis

Kit ini belum dijual bebas.