Tidak Terikat pada Framework
Gunakan Komponen Custom Berbasis Standar secara Langsung atau Gunakan Bantuan Pengaturan untuk React, Vue, Angular, Svelte, dan Solid.
Capacitor Siap
Hormati Area yang Aman, Gerakan Keyboard, Gestur Samping Nativ, dan Dimming Warna Tema WebView dari Layer Web.
Setiap Bentuk Lembar
Susun Lembar Bawah, Lembar Samping Terpisah, Lembar Atas, Dialog Tengah, Toast, Lembar Terpisah, Kartu, Halaman, dan Kotak Cahaya.
CSS Modern
Author detent dengan em, rem, satuan viewport, calc(), dan variabel CSS sambil ukuran default tetap em berdasarkan.
Kapan Menggunakannya
Judul bagian “Kapan 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.
Gunakanlah ketika Anda membutuhkan:
- sheet bawah dengan satu atau lebih detent
- sidebar kiri atau kanan dan sheet atas
- dialog berpusat, lightbox, kartu, dan overlay seperti toast
- sheet yang persisten tetapi membiarkan aplikasi di belakangnya tetap interaktif
- layar penuh yang masuk dari sudut
- efek stack, kedalaman, dan parallax yang dipicu oleh progress sheet
- bantuan scroll yang mengekspos nilai progress dan jarak
- Capacitor-aman layout untuk notch, indikator rumah, potongan Android, dan keyboard perangkat lunak
Koveran Usecase
Bagian berjudul “Koveran Usecase”| Usecase | Polanya Capgo 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 pengaturan offset viewport visual |
| Toast | inert-outside="false", focus-trap="false", dan tidak ada penutup klik luar |
| Kertas Lepas | cap-sheet-special-wrapper dengan margin dan radius kustom plus |
| Kertas dari Bawah | konten kertas bawah penuh |
| Kertas Atas | content-placement="top" |
| Kertas dengan Stacking | cap-sheet-stack dengan variabel kedalaman |
| Kertas dengan Kedalaman | cap-sheet-outlet dan transformasi yang dikemudikan oleh progress |
| Halaman Parallax | cap-sheet-outlet dengan cap-scroll progress |
| Halaman | konten penuh viewport memasuki dari tepi |
| Lampiran | content-placement="center" dengan latar belakang dan konten media |
| Lampiran yang Tidak Perlu Dihapus dengan Detent | default-presented, swipe-dismissal="false", dan inert-outside="false" |
| Kartu | konten lampiran padat yang berada di tengah |
Inti API
Bagian yang berjudul “Inti API”<cap-sheet>mengendalikan keadaan presentasi, detent, penempatan, gerakan, aksesibilitas, dan acara.<cap-sheet-trigger>menyatakan aksi hadir, 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 berlapis.<cap-sheet-outlet>Mengungkapkan progress sheet ke halaman, kedalaman, dan efek parallax.<cap-scroll>dan<cap-scroll-content>Mengungkapkan progress peramban dan jarak bantuan.setupSheet(element, options?)Mengatur sheet dari efek framework 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 bottom sheet UIKit atau Android native, sehingga aplikasi Anda tetap memiliki kontrol gaya penuh sambil menghormati keterbatasan 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.
Judul bagian “Demos Dan Taman Bermain”
Demos animasi WebP untuk setiap kasus yang didukung tersedia di README repository. Contoh-contoh juga tersedia sebagai taman bermain StackBlitz:Demos Dan Taman Bermain
| Kertas Panjang | Detent |
|---|---|
 |  |
| Sidebar Bergerak | Lightbox Bergerak |
|---|---|
 |  |
Teruskan dari @capgo/capacitor-sheets
Judul Bagian “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, Mengambah atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Perusahaan Ionic untuk alur kerja produk di Alternatif Plugin Perusahaan Ionic, dan Capgo Pembangunan Asli untuk alur kerja produk di Capgo Pembangunan Asli.