Tidak bergantung pada framework
Gunakan elemen kustom berbasis standar secara langsung atau gunakan bantuan pengaturan untuk React, Vue, Angular, Svelte, dan Solid.
@capgo/capacitor-sheets
Buat lembaran-lembaran kain sutra, drawer, dialog, toast, lightbox, kartu, dan lapisan halaman di mana saja frontend Capacitor.
Capacitor siap
Hormati area aman, gerakan keyboard, sentuhan tepi asli, dan WebView tema warna keabuan dari lapisan web.
Setiap bentuk lembaran
Susun lembaran bawah, laci samping, lembaran atas, dialog tengah, tost, lembaran terpisah, kartu, halaman, dan kotak cahaya.
CSS modern
Tentukan detent dengan em, rem, satuan viewport, calc(), dan variabel CSS sementara ukuran default tetap em berdasarkan.
When untuk Menggunakannya
Judul Bagian “When untuk Menggunakannya”@capgo/capacitor-sheets digunakan untuk aplikasi Capacitor yang memerlukan overlay mobile berkualitas tinggi tanpa harus menerapkan framework UI tertentu. Ini dikirim sebagai elemen kustom, sehingga paket inti tidak memiliki ketergantungan runtime React, Vue, Angular, Svelte, atau Solid.
Pakailah ketika Anda memerlukan:
- daun bawah dengan satu atau lebih detent
- samping kiri atau kanan dan daun atas
- dialog berpusat, laci cahaya, kartu, dan overlay seperti toast
- daun yang persisten tetapi tetap memungkinkan aplikasi di belakangnya tetap interaktif
- overlay penuh halaman yang masuk dari sisi
- efek stack, kedalaman, dan paralaks yang dikendalikan oleh progress daun
- penolong scroll yang menampilkan nilai progress dan jarak
- Capacitor-safe layout for notches, home indicators, Android cutouts, and software keyboards
Koveran Usecase
Judul Bagian “Koveran Usecase”| Usecase | Polosan Capgo Sheets |
|---|---|
| Lembar Panjang | cap-sheet dengan scroll konten alami atau cap-scroll |
| Lembar dengan Detent | detents="18em 32em" atau 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 dapat ditutup dengan klik luar |
| Sheet Terpisah | cap-sheet-special-wrapper plus margin dan radius kustom |
| Halaman dari Bawah | konten sheet bawah penuh |
| Top Sheet | 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 | konten penuh viewport yang masuk dari sisi |
| Lightbox | content-placement="center" dengan latar belakang dan konten media |
| Sheet yang Tahan dengan Detent | default-presented, swipe-dismissal="false", dan inert-outside="false" |
| Kartu | konten sheet yang terpusat dan padat |
Inti API
Bab yang berjudul “Inti API”<cap-sheet>mengontrol keadaan presentasi, detent, penempatan, gerakan, aksesibilitas, dan event.<cap-sheet-trigger>menyatakan aksi present, tutup, toggle, dan detent-step.<cap-sheet-view>menempatkan overlay dan menerapkan offset area yang aman dan keyboard.<cap-sheet-backdrop>mengrender backdrop yang sinkron dengan progress.<cap-sheet-content>mengrender permukaan sheet.<cap-sheet-handle>menyediakan kontrol drag dan keyboard detent.<cap-sheet-stack>koordinat yang berlapis lembaran.<cap-sheet-outlet>mengekspos kemajuan lembaran ke halaman, kedalaman, dan efek paralaks.<cap-scroll>dan<cap-scroll-content>mengungkapkan kemajuan dan jarak peramban bantuan.setupSheet(element, options?)mengatur lembaran dari efek kerangka atau hook siklus hidup.
Capacitor Model Tata Letak
Judul Bagian “Capacitor Layout Model”Layar Lembaran Default membaca env(safe-area-inset-*) dan Capacitor-style --safe-area-inset-* variabel cadangan, 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 memerlukan perilaku yang berbeda.
Pengaturan keyboard diaktifkan secara default. Lembar kerja mendengarkan visualViewport perubahan ukuran dan pergerakan kursor, menambahkan offset keyboard ke viewport, dan fokus kontrol dengan preventScroll agar input tetap terlihat di atas keyboard perangkat lunak.
Paket ini berjalan di layer web. Tidak menampilkan bottom sheet UIKit atau Android native, sehingga aplikasi Anda tetap memiliki kendali gaya penuh sambil menghormati konstrain WebView yang berlaku di Capacitor.
Demos Dan Playground
Judul bagian “Demos Dan Playground”Demos animasi WebP untuk setiap kasus yang didukung dikirimkan dalam README repositori. Contoh-contoh juga tersedia sebagai playground StackBlitz:
| Sheet Panjang yang Dibuat Animasi | Detent |
|---|---|
 |  |
| Sidebar | Lightbox |
|---|---|
 |  |
Mengikuti dari @capgo/capacitor-sheets
Bab yang berjudul “Mengikuti dari @capgo/capacitor-sheets”Jika Anda menggunakan @capgo/capacitor-sheets untuk merencanakan pekerjaan plugin native, hubungkan 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 Native untuk alur kerja produk di Capgo Pembangunan Asli.