@capgo/capacitor-sheets

Buat lembaran kertas, kotak, dialog, notifikasi, kotak kecil, kartu, dan lapisan halaman dalam bentuk apa pun Capacitor frontend.

Mulai GitHub

Tidak bergantung pada framework

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

Capacitor siap

Hormati area aman, gerakan keyboard, sentuhan tepi asli, dan pengurangan tema WebView dari layer web.

Setiap bentuk lembaran

Komposisi sheet bawah, drawer samping, sheet atas, dialog yang berpusat, toast, sheet yang terpisah, kartu, halaman, dan kotak kecil.

CSS Modern

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

Ketika Untuk Menggunakannya

@capgo/capacitor-sheets adalah untuk aplikasi Capacitor yang memerlukan overlay mobile berkualitas tinggi tanpa menerima kerangka UI tertentu. Ini berlayar sebagai elemen kustom, sehingga paket inti tidak memiliki ketergantungan runtime React, Vue, Angular, Svelte, atau Solid.

Pakai ketika Anda memerlukan:

sheet bawah dengan satu atau lebih detent
sidebar kiri atau kanan dan sheet atas
dialog yang berada di tengah, latar belakang terang, kartu, dan overlay seperti toast
lembaran yang tetap ada, tetapi tetap memungkinkan aplikasi di belakangnya tetap interaktif
overlay penuh halaman yang masuk dari sudut
efek stack, kedalaman, dan parallax yang dikendalikan oleh kemajuan lembaran
bantuan scroll yang menampilkan kemajuan dan nilai jarak
Capacitor-aman layout untuk notch, indikator rumah, potongan Android, dan keyboard perangkat lunak

Koveran Usecase

Koveran	Capgo Lembar Kerja pola
Lembar Kerja Panjang	`cap-sheet` dengan scroll konten alami atau `cap-scroll`
Lembar Kerja dengan Detent	`detents="18em 32em"` plus `stepTo()` atau trigger langkah
Sidebar	`content-placement="left"` atau `content-placement="right"`
Lembar Bawah	default `content-placement="bottom"`
Lembar Kerja dengan Keyboard	`native-focus-scroll-prevention` dan pengaturan offset viewport visual
Toast	`inert-outside="false"`, `focus-trap="false"`Dengan tanda peringatan, dan tidak ada penutupan klik luar
Sheet Terpisah	`cap-sheet-special-wrapper` plus margin dan radius kustom
Halaman dari Bawah	isi sheet bawah penuh
Sheet Atas	`content-placement="top"`
Sheet dengan Pemilahan	`cap-sheet-stack` dengan variabel kedalaman
Sheet dengan Kedalaman	`cap-sheet-outlet` dan transformasi yang dikemudian
Page Parallax	`cap-sheet-outlet` bersamaan dengan `cap-scroll` progres
Page	konten penuh viewport masuk dari sisi
Lightbox	`content-placement="center"` dengan latar belakang dan konten media
Sheet yang Tidak Perlu Dibuka	`default-presented`, `swipe-dismissal="false"`, dan `inert-outside="false"`
Card	konten sheet yang terpusat dan padat

Core API

<cap-sheet> owns state presentasi, detent, penempatan, gestur, aksesibilitas, dan event.
<cap-sheet-trigger> mengumumkan aksi hadir, tutup, toggle, dan detent-step.
<cap-sheet-view> menempatkan 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> memberikan kontrol geser dan keyboard detent.
<cap-sheet-stack> mengkoordinasikan sheet yang bertumpuk.
<cap-sheet-outlet> mengekspos progress sheet ke halaman, kedalaman, dan efek parallax.
<cap-scroll> dan <cap-scroll-content> mengungkapkan progress scroll dan jarak bantu.
setupSheet(element, options?) mengkonfigurasi sheet dari efek framework atau hook siklus hidup.

Capacitor Model Layout

Viewport lembaran bawaan 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 pengguna memerlukan perilaku yang berbeda.

Pengaturan keyboard diaktifkan secara default. Lembaran mendengarkan event resize dan scroll, menambahkan offset keyboard ke viewport, dan fokus kontrol dengan visualViewport agar input tetap terlihat di atas keyboard perangkat lunak. preventScroll Paket berjalan di layer web. Tidak menampilkan lembaran bawah native UIKit atau Android, sehingga aplikasi Anda tetap memiliki kendali gaya penuh sambil 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.

Demos Dan Permainan

Demos animasi WebP untuk setiap kasus yang didukung dikirimkan dalam repositori README. Contoh-contoh juga tersedia sebagai pameran StackBlitz:

Lembaran Panjang	Detent

Sidebar	Lightbox

Teruskan dari @capgo/capacitor-sheets

Jika Anda menggunakan @capgo/capacitor-sheets untuk merencanakan pekerjaan plugin native, hubungkannya dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo Plugin-Plugin Capacitor oleh Capgo untuk detail implementasi di Capacitor Plugins oleh Capgo, Menambahkan atau Mengupdate Plugins untuk detail implementasi di Menambahkan atau Mengupdate Plugins, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Build Natively untuk alur kerja produk di Capgo Build Natively.