/capgo/capacitor-sheets

Buat lembaran, drawer, dialog, toast, lightbox, kartu, dan lapisan halaman dalam mana Capacitor frontend.

Netral terhadap framework

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

Capacitor siap

Tunjukkan rasa hormat terhadap area yang aman, gerakan keyboard, sentuhan sisi native, dan WebView tema-warna mengurangi dari lapisan web.

Setiap bentuk lembaran

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

Pakaian CSS Modern

Penulis detent dengan em, rem, satuan viewport, calc(), dan variabel CSS sementara pengaturan ukuran default tetap em berdasarkan.

Kapan 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.

Gunakanlah ketika kamu memerlukan:

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 memungkinkan aplikasi di belakangnya tetap interaktif
overlay penuh halaman yang masuk dari sisi
efek stack, kedalaman, dan paralaks yang dikendalikan oleh progress sheet
bantuan scroll yang menampilkan nilai progress dan jarak
Capacitor-safe layout untuk notches, indikator home, cutout Android, dan keyboard software

Koveran Usecase

Usecase	Capgo Pola Lembaran
Lembaran Panjang	`cap-sheet` dengan scroll konten alami atau `cap-scroll`
Lembaran dengan Detent	`detents="18em 32em"` plus `stepTo()` atau trigger langkah
Sidebar	`content-placement="left"` atau `content-placement="right"`
Panel Bawah	default `content-placement="bottom"`
Panel dengan Keyboard	`native-focus-scroll-prevention` dan penyesuaian offset viewport visual
Toast	`inert-outside="false"`, `focus-trap="false"`, dan tidak ada penutupan klik luar
Panel Terpisah	`cap-sheet-special-wrapper` plus margin dan radius kustom
Halaman dari Bawah	konten sheet bawah penuh layar
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 progress
Page Parallax	`cap-sheet-outlet` dengan `cap-scroll` progress
Page	konten full-viewport yang masuk dari sisi
Lightbox	`content-placement="center"` dengan latar belakang dan konten media
Kertas yang Tahan dengan Detent	`default-presented`, `swipe-dismissal="false"`, dan `inert-outside="false"`
Kartu	konten kertas yang padat dan berpusat

Inti API

<cap-sheet> miliki status presentasi, detent, penempatan, gerakan, aksesibilitas, dan acara.
<cap-sheet-trigger> menyatakan aksi hadir, tutup, toggle, dan langkah detent.
<cap-sheet-view> menempatkan overlay dan menerapkan offset area yang aman dan keyboard.
<cap-sheet-backdrop> menampilkan latar belakang sinkronisasi progress.
<cap-sheet-content> menampilkan permukaan kertas.
<cap-sheet-handle> menyediakan kontrol detent gesek dan keyboard.
<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> mengekspos kemajuan dan jarak peramban.
setupSheet(element, options?) mengatur lembaran dari efek framework atau hook siklus hidup.

Model Layout Capacitor

Layar lembaran default membaca env(safe-area-inset-*) dan Capacitor-style --safe-area-inset-* menggunakan 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 resize dan scroll event, menambahkan offset keyboard ke viewport, dan mengfokuskan 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.

Bab berjudul “Demos Dan Playground”

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

Detent	Detents

Sidebar	Lightbox

Mengikuti 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, 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 Asli untuk alur kerja produk di Capgo Build Native.