/capgo/capacitor-sheets

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

Netral terhadap framework

Pakai 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 tepi asli, dan penurunan tema WebView dari lapisan web.

Setiap bentuk lembar kerja

Buat sheet bawah, drawer samping, sheet atas, dialog tengah, notifikasi, sheet terpisah, kartu, halaman, dan kotak kilat.

CSS Modern

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

Menggunakan Kapan

@capgo/capacitor-sheets adalah untuk aplikasi Capacitor yang membutuhkan overlay mobile berkualitas tinggi tanpa menerapkan kerangka UI tertentu. Ia dikirim sebagai elemen kustom, jadi paket inti tidak memiliki ketergantungan runtime React, Vue, Angular, Svelte, atau Solid.

Menggunakannya ketika Anda membutuhkan:

sheet bawah dengan satu atau lebih detent
sidebar kiri atau kanan dan sheet atas
dialog berpusat, laci cahaya, kartu, dan overlay seperti toast
kertas kerja yang tetap membuat aplikasi di belakangnya tetap interaktif
overlay penuh halaman yang masuk dari sudut
efek stack, kedalaman, dan parallax yang dikendalikan oleh kemajuan lembaran
penolong scroll yang menampilkan nilai kemajuan dan jarak
Capacitor-tata letak aman untuk notch, indikator home, potongan Android, dan keyboard perangkat lunak

Koveran Usecase

Usecase	Polanya Lembaran Capgo
Kertas Panjang	`cap-sheet` Kertas alami dengan konten scroll atau `cap-scroll`
Kertas dengan Detent	`detents="18em 32em"` plus `stepTo()` atau trigger langkah
Sidebar	`content-placement="left"` atau `content-placement="right"`
Kertas Bawah	default `content-placement="bottom"`
Kertas dengan Keyboard	`native-focus-scroll-prevention` dan pengaturan offset viewport visual
Toast	`inert-outside="false"`, `focus-trap="false"`, dan tidak ada penutupan klik luar
Sheet Terpisah	`cap-sheet-special-wrapper` plus margin dan radius kustom
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 dikemudikan oleh kemajuan
Halaman Parallax	`cap-sheet-outlet` dengan `cap-scroll` progress
Halaman	konten penuh layar 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"`
Card	konten sheet yang terpusat dan kompak

Inti API

<cap-sheet> bertanggung jawab atas keadaan presentasi, detent, penempatan, gestur, aksesibilitas, dan event.
<cap-sheet-trigger> Mengumumkan aksi presentasi, tutup, toggle, dan detent-step.
<cap-sheet-view> Mengatur posisi overlay dan menerapkan offset area aman dan keyboard.
<cap-sheet-backdrop> renders a progress-synced backdrop.
<cap-sheet-content> Menggambar permukaan sheet.
<cap-sheet-handle> Menghadirkan kontrol geser dan keyboard detent.
<cap-sheet-stack> Mengkoordinasikan sheet yang bertumpuk.
<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.

Mengatur Model Layout Capacitor

Pemandangan viewport sheet bawaan 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" when a usecase needs different behavior.

ketika suatu kasus pengguna memerlukan perilaku yang berbeda. visualViewport resize dan scroll event, menambahkan offset keyboard ke viewport, dan fokus kontrol dengan preventScroll Masukan tetap terlihat di atas keyboard perangkat lunak.

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.

Demos dan Playgrounds

Contoh animasi WebP untuk setiap penggunaan yang didukung dikirimkan dalam README repositori. Contoh-contoh tersebut juga tersedia sebagai playground StackBlitz:

Sheet Panjang	Detent

Sidebar	Lightbox

Teruskan dari @capgo/capacitor-sheets

Jika Anda menggunakan /capgo/capacitor-sheets hubungkan plugin native untuk perencanaan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Menginstal atau Mengupdate Plugin untuk detail implementasi di Menginstal atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Membangun Aplikasi Natively dengan Capgo untuk alur kerja produk di Capgo Pembangunan Asli.