Tidak bergantung pada framework
Gunakan elemen kustom berbasis standar secara langsung atau gunakan bantuan pengaturan untuk React, Vue, Angular, Svelte, dan Solid.
Capacitor siap
Menghormati area aman, gerakan keyboard, sentuhan tepi asli, dan dimming tema WebView dari layer web.
Setiap bentuk lembaran
Komposisi lembaran bawah, drawer samping, lembaran atas, dialog tengah, toast, lembaran terpisah, kartu, halaman, dan lightbox.
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.
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 tetap memungkinkan aplikasi di belakangnya untuk berinteraksi
- layar penuh yang masuk dari sisi
- efek stack, kedalaman, dan parallax yang dikendalikan oleh kemajuan sheet
- bantuan scroll yang mengekspos nilai kemajuan dan jarak
- Capacitor-aman layout untuk notch, indikator rumah, potongan Android, dan keyboard perangkat lunak
Koveran Usecase
Bagian berjudul “Koveran Usecase”| Usecase | Capgo Pola Sheet |
|---|---|
| Sheet 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 plus margin dan radius khusus |
| Halaman 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 progress |
| Halaman | Isi konten penuh layar memasuki dari sudut |
| Lightbox | content-placement="center" Dengan latar belakang dan konten media |
| Sheet yang Tertanam dengan Detent | default-presented, swipe-dismissal="false", dan inert-outside="false" |
| Card | Konten sheet yang kompak dan berpusat |
Inti API
Bab berjudul “Inti API”<cap-sheet>Mengontrol keadaan presentasi, detent, penempatan, gerakan, aksesibilitas, dan acara.<cap-sheet-trigger>Mengumumkan 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 gulir dan jarak bantuan.setupSheet(element, options?)Mengkonfigurasi sheet dari efek framework atau hook siklus hidup.
Capacitor Model Tata Letak
Bab berjudul “Capacitor Model Tata Letak”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. Lembar kerja mendengarkan event resize dan scroll, menambahkan offset keyboard ke viewport, dan fokus 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 asli, sehingga aplikasi Anda tetap memiliki kendali 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 dikirimkan dalam README repository. Contoh-contoh juga tersedia sebagai taman bermain StackBlitz:Demos Dan Taman Bermain
| Lembar Panjang | Detent |
|---|---|
 |  |
| Sidebar | Lightbox |
|---|---|
 |  |
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, 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 Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.