@capgo/capacitor-sheets

Buat lembaran, drawer, dialog, toast, lightbox, kartu, dan overlay halaman dalam Capacitor frontend apa pun.

Tidak Terikat pada Framework

Pakai elemen kustom berbasis standar secara langsung atau pakai bantuan pengaturan untuk React, Vue, Angular, Svelte, dan Solid.

Capacitor siap

Tunjukkan rasa hormat terhadap area yang aman, gerakan keyboard, sentuhan tepi asli, dan penurunan tema WebView dari layer web.

Setiap Bentuk Lembaran

Komposisi lembaran bawah, laci samping, lembaran atas, dialog yang berpusat, tost, lembaran yang terpisah, kartu, halaman, dan kotak cahaya.

CSS Modern

Pengembang detent dengan em, rem, satuan viewport, calc(), dan variabel CSS sambil ukuran default tetap em berdasarkan.

Kapan Menggunakannya

@capgo/capacitor-sheets adalah untuk aplikasi Capacitor yang membutuhkan overlay mobile berkualitas tinggi tanpa menerapkan 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:

daun bawah dengan satu atau lebih detent
samping kiri atau kanan dan daun atas
dialog yang berpusat, laci cahaya, kartu, dan notifikasi seperti overlay
daun yang persisten yang memungkinkan aplikasi di belakangnya tetap interaktif
layar penuh yang masuk dari sudut
efek stack, kedalaman, dan parallax yang dipicu oleh kemajuan sheet
penolong scroll yang mengekspos nilai kemajuan dan jarak
Capacitor-aman layout untuk notch, indikator rumah, potongan Android, dan keyboard perangkat lunak

Koverasi Usecase

Usecase	Polanya Capgo 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 batas dan radius kustom
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
Kertas Parallax	`cap-sheet-outlet` dengan `cap-scroll` transformasi yang dikemudikan oleh progress
Halaman	konten penuh viewport memasuki dari sudut
Lampiran	`content-placement="center"` dengan latar belakang dan konten media
Lampiran yang Tidak Sopan dengan Detent	`default-presented`, `swipe-dismissal="false"`, dan `inert-outside="false"`
Kartu	konten sheet yang kompak dan berpusat

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 bertumpuk.
<cap-sheet-outlet> Mengungkapkan progress sheet ke efek halaman, kedalaman, dan parallax.
<cap-scroll> dan <cap-scroll-content> Mengungkapkan progress peramban dan jarak bantu scroll.
setupSheet(element, options?) Mengatur sheet dari efek framework atau hook siklus hidup.

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. Sheet 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 native, 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.

Judul bagian “Demos Dan Taman Bermain”

Keyboard handling is enabled by default. The sheet listens to resize and scroll events, adds a keyboard offset to the viewport, and focuses controls with so inputs stay visible above the software keyboard.

Kertas Panjang	Detensi

Sidebar Bergerak	Lightbox Bergerak

Teruslah dari @capgo/capacitor-sheets

Jika Anda menggunakan @capgo/capacitor-sheets untuk merencanakan pekerjaan plugin asli, 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 Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Natively untuk alur kerja produk di Capgo Pembangunan Natively.