Tidak bergantung pada framework
Gunakan elemen kustom berbasis standar secara langsung atau gunakan bantuan pengaturan untuk React, Vue, Angular, Svelte, dan Solid.
Capacitor siap digunakan
Hormati area aman, gerakan keyboard, sentuhan sisi native, dan penurunan tema WebView dari layer web.
Setiap bentuk lembaran
Susun lembaran bawah, laci samping, lembaran atas, dialog tengah, tost, lembaran terpisah, kartu, halaman, dan kotak cahaya.
CSS modern
Pembuat detent dengan em, rem, satuan viewport, calc(), dan variabel CSS sambil ukuran default tetap em berdasarkan.
Mengapa Menggunakannya
Bab berjudul “Mengapa Menggunakannya”@capgo/capacitor-sheets adalah untuk aplikasi Capacitor yang membutuhkan overlay mobile berkualitas tinggi tanpa menerima kerangka UI tertentu. Ini dikirim sebagai elemen kustom, sehingga paket inti tidak memiliki ketergantungan runtime React, Vue, Angular, Svelte, atau Solid.
Gunakan ketika Anda membutuhkan:
- daun bawah dengan satu atau lebih detent
- samping kiri atau kanan dan daun atas
- dialog berpusat, laci cahaya, kartu, dan notifikasi seperti overlay
- daun yang persisten tetapi tetap memungkinkan aplikasi di belakangnya tetap interaktif
- layar penuh yang masuk dari sudut
- efek stack, kedalaman, dan parallax yang dipicu oleh kemajuan sheet
- bantuan scroll yang mengekspos nilai kemajuan dan jarak
- Capacitor-aman layout untuk notch, indikator rumah, potongan Android, dan kursor keyboard perangkat lunak
Koveran Usecase
Bagian berjudul “Koveran Usecase”| Usecase | Capgo Pola Sheet |
|---|---|
| Sheet yang Panjang | cap-sheet dengan konten scroll alami atau cap-scroll |
| Sheet dengan Detent | detents="18em 32em" plus stepTo() atau trigger langkah |
| Sidebar | content-placement="left" atau content-placement="right" |
| Bottom Sheet | default content-placement="bottom" |
| Sheet dengan Keyboard | native-focus-scroll-prevention dan penanganan offset viewport visual |
| Toast | inert-outside="false", focus-trap="false", dan tidak ada penutup klik luar |
| Sheet Terpisah | cap-sheet-special-wrapper plus margin dan radius kustom |
| Sheet dari Bawah | konten sheet bawah penuh |
| Sheet Atas | content-placement="top" |
| Sheet dengan Stacking | cap-sheet-stack dengan variabel kedalaman |
| Sheet dengan Kedalaman | cap-sheet-outlet dan transformasi yang dikendalikan oleh progress |
| Halaman Parallax | cap-sheet-outlet dengan cap-scroll transformasi yang dikendalikan oleh progress |
| Halaman | konten penuh viewport memasuki dari tepi |
| Lightbox | content-placement="center" dengan latar belakang dan konten media |
| Sheet yang Tertanam dengan Detent | default-presented, swipe-dismissal="false", dan inert-outside="false" |
| Kartu | konten sheet yang terpusat dan kompak |
Inti API
Bagian berjudul “Inti API”<cap-sheet>mengendalikan keadaan presentasi, detent, penempatan, gerakan, aksesibilitas, dan event.<cap-sheet-trigger>menyatakan aksi present, tutup, toggle, dan detent-step.<cap-sheet-view>Mengatur posisi overlay dan menerapkan offset area aman dan keyboard.<cap-sheet-backdrop>Mengrender backdrop sinkron dengan progress.<cap-sheet-content>Mengrender permukaan sheet.<cap-sheet-handle>Mengatur kontrol geser dan detent keyboard.<cap-sheet-stack>Mengkoordinasikan sheet yang bertumpuk.<cap-sheet-outlet>Mengungkapkan progress sheet ke efek halaman, kedalaman, dan parallax.<cap-scroll>dan<cap-scroll-content>Mengungkapkan progress gulir dan jarak bantuan.setupSheet(element, options?)Mengatur sheet dari efek kerangka atau hook siklus hidup.
Capacitor Model Tata Letak
Judul bagian “Capacitor Layout Model”Viewport sheet default membaca env(safe-area-inset-*) dan Capacitor-style --safe-area-inset-* variabel fallback, kemudian menerapkan tepi yang dipilih sebagai padding di sekitar overlay. safe-area="auto" melindungi semua tepi; gunakan safe-area="bottom left right" atau safe-area="none" ketika sebuah kasus penggunaan memerlukan perilaku yang berbeda.
Pengaturan keyboard diaktifkan secara default. Lembaran ini mendengarkan event resize dan scroll, menambahkan offset keyboard ke viewport, dan fokuskan kontrol dengan visualViewport sehingga input tetap terlihat di atas keyboard perangkat lunak. preventScroll Paket ini berjalan di layer web. Tidak menampilkan lembaran bawah native UIKit atau Android, sehingga aplikasi Anda tetap memiliki kendali gaya penuh sambil masih menghormati konstrain WebView yang berlaku di __CAPGO_KEEP_0__.
The package runs in the web layer. It does not render native UIKit or Android bottom sheets, so your app keeps full styling control while still respecting the WebView constraints that matter in Capacitor.
Bab berjudul “Demos Dan Taman Bermain”
Demos animasi WebP untuk setiap kasus yang didukung dikirimkan dalam README repository. Contoh-contoh juga tersedia sebagai taman bermain StackBlitz:Demos Dan Taman Bermain
| Lembaran Panjang | Detent |
|---|---|
 |  |
| Sidebar | Lightbox |
|---|---|
 |  |
- Grid Demo Penuh
- Lahan Bermain React
- Lahan Bermain Vue
- Lahan Bermain Angular
- Layar Svelte
- Layar Solid
Teruskan dari @capgo/capacitor-sheets
Bagian berjudul “Teruskan dari @capgo/capacitor-sheets”Jika Anda menggunakan @capgo/capacitor-sheets untuk merencanakan pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Natively untuk alur kerja produk di Capgo Pembangunan Natively.