@capgo/capacitor-sheets

Bottom sheets, drawers, dialogs, dan overlay yang agnostic terhadap framework, dioptimalkan untuk Capacitor WebViews.

Agnostik framework

Gunakan custom elements berbasis standar secara langsung atau gunakan helper setup untuk React, Vue, Angular, Svelte, dan Solid.

Capacitor siap

Perhatikan safe area, pergerakan keyboard, native edge gesture, dan peredupan theme-color WebView dari layer web.

Setiap bentuk sheet

Buat bottom sheet, side drawer, top sheet, dialog terpusat, toast, detached sheet, card, page, dan lightbox.

CSS modern

Tentukan detents dengan em, rem, satuan viewport, calc(), dan variabel CSS sementara ukuran default tetap em berbasis.

Dukungan platform

Platform	Dukungan	Catatan
iOS	Lapisan web	Custom elements di dalam WKWebView
Android	Lapisan web	Custom elements di dalam Android WebView
Web	Ya	Komponen yang sama untuk build web Capacitor

Kapan Digunakan

@capgo/capacitor-sheets ditujukan untuk aplikasi Capacitor yang butuh mobile overlay berkualitas tinggi tanpa harus memakai UI framework tertentu. Karena menggunakan custom elements, paket intinya tidak memiliki dependensi runtime React, Vue, Angular, Svelte, atau Solid.

Gunakan saat Anda butuh:

bottom sheet dengan satu atau lebih detents
sidebar kiri atau kanan dan top sheet
dialog tengah, lightbox, card, dan overlay mirip toast
persistent sheet yang menjaga aplikasi di belakangnya tetap interaktif
full-page overlay yang muncul dari sisi layar
efek stack, depth, dan parallax berdasarkan progress sheet
scroll helper yang menampilkan nilai progress dan jarak
layout Capacitor-safe untuk notch, home indicator, Android cutout, dan software keyboard

Cakupan Usecase

Usecase	Pola Capgo Sheets
Sheet Panjang	`cap-sheet` dengan scroll konten natural atau `cap-scroll`
Sheet dengan Detent	`detents="18em 32em"` plus `stepTo()` atau trigger step
Sidebar	`content-placement="left"` atau `content-placement="right"`
Bottom Sheet	default `content-placement="bottom"`
Sheet dengan Keyboard	`native-focus-scroll-prevention` dan penanganan offset visual viewport
Toast	`inert-outside="false"`, `focus-trap="false"`, dan tanpa dismiss saat klik di luar
Sheet Terpisah	`cap-sheet-special-wrapper` plus margin dan radius kustom
Halaman dari Bawah	konten bottom sheet tinggi penuh
Top Sheet	`content-placement="top"`
Sheet dengan Stacking	`cap-sheet-stack` dengan variabel depth
Sheet dengan depth	`cap-sheet-outlet` dan transform berbasis progress
Halaman Parallax	`cap-sheet-outlet` dengan `cap-scroll` progres
Halaman	konten full-viewport yang masuk dari tepi
Lightbox	`content-placement="center"` dengan backdrop dan konten media
Persistent Sheet dengan Detent	`default-presented`, `swipe-dismissal="false"`, dan `inert-outside="false"`
Card	konten sheet yang ringkas dan terpusat

Inti API

<cap-sheet> mengelola state presentasi, detents, penempatan, gesture, aksesibilitas, dan event.
<cap-sheet-trigger> mendeklarasikan aksi present, dismiss, toggle, dan detent-step.
<cap-sheet-view> memposisikan overlay serta menerapkan offset safe-area dan keyboard.
<cap-sheet-backdrop> merender backdrop yang sinkron dengan progress.
<cap-sheet-content> merender permukaan sheet.
<cap-sheet-handle> menyediakan kontrol detent via drag dan keyboard.
<cap-sheet-stack> mengoordinasikan sheet yang bertumpuk.
<cap-sheet-outlet> mengekspos progress sheet ke efek page, depth, dan parallax.
<cap-scroll> dan <cap-scroll-content> menyediakan helper untuk progress scroll dan jarak.
setupSheet(element, options?) mengonfigurasi sheet dari framework effects atau lifecycle hooks.

Model Tata Letak Capacitor

Viewport sheet default membaca env(safe-area-inset-*) dan gaya Capacitor --safe-area-inset-* variabel fallback, lalu menerapkan edge yang dipilih sebagai padding di sekitar overlay. safe-area="auto" melindungi semua edge; gunakan safe-area="bottom left right" atau safe-area="none" saat usecase membutuhkan perilaku berbeda.

Keyboard handling aktif secara default. Sheet mendengarkan visualViewport event resize dan scroll, menambahkan keyboard offset ke viewport, serta fokus ke kontrol dengan preventScroll agar input tetap terlihat di atas software keyboard.

Package ini berjalan di web layer. Ia tidak merender native UIKit atau Android bottom sheets, sehingga aplikasi Anda tetap memiliki kontrol styling penuh sambil tetap mematuhi batasan WebView yang penting di Capacitor.

Demo dan Playground

Demo WebP animasi untuk setiap usecase yang didukung tersedia di README repositori. Contoh-contohnya juga tersedia sebagai playground StackBlitz:

Sheet Panjang	Detents

Sidebar	Lightbox

Lanjutkan dengan @capgo/capacitor-sheets

Jika Anda menggunakan @capgo/capacitor-sheets untuk merencanakan pekerjaan plugin native, hubungkan dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi pada Capacitor Plugins oleh Capgo Menambahkan atau Memperbarui Plugin untuk detail implementasi pada Menambahkan atau Memperbarui Plugin, Alternatif Plugin Ionic Enterprise untuk alur kerja produk di alternatif plugin Ionic Enterprise, dan Capgo Native Build untuk alur kerja produk di Capgo Native Builds.