@capgo/capacitor-sheets

@Capacitor/__CAPGO_KEEP_1__-sheets

Bangun lembaran kertas, drawer, dialog, toast, lightbox, kartu, dan overlay halaman dalam setiap __CAPGO_KEEP_0__ frontend. GitHub

Netral terhadap framework

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

Capacitor siap digunakan

Menghormati area aman, gerakan keyboard, gestur tepi native, dan penurunan tema WebView dari layer web.

Setiap bentuk lembar kerja

Komposisi sheet bawah, drawer samping, sheet atas, dialog tengah, tost, sheet terpisah, kartu, halaman, dan kotak bayangan.

CSS Modern

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

Menggunakan Kapan

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

Menggunakannya ketika Anda memerlukan:

sheet bawah dengan satu atau lebih detent
sidebar kiri atau kanan dan sheet atas
dialog-dialog yang berpusat, lightbox, kartu, dan overlay seperti toast
lembaran yang berkelanjutan yang memungkinkan aplikasi di belakangnya tetap interaktif
overlay halaman penuh yang masuk dari sisi
efek stack, kedalaman, dan parallax yang dikendalikan oleh kemajuan lembaran
penolong scroll yang menampilkan nilai kemajuan dan jarak
Capacitor-safe layout for notches, home indicators, Android cutouts, and software keyboards

Koveran Usecase

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

Core API

<cap-sheet> mengatur keadaan presentasi, detent, penempatan, gerakan, aksesibilitas, dan event.
<cap-sheet-trigger> mengumumkan aksi present, tutup, toggle, dan detent-step.
<cap-sheet-view> menempatkan overlay dan menerapkan offset area aman dan keyboard.
<cap-sheet-backdrop> menggambar latar belakang sinkron dengan progress.
<cap-sheet-content> menggambar permukaan sheet.
<cap-sheet-handle> menyediakan kontrol geser dan keyboard detent.
<cap-sheet-stack> menentukan sheet yang bertumpuk.
<cap-sheet-outlet> mengekspos progress sheet ke halaman, kedalaman, dan efek parallax.
<cap-scroll> dan <cap-scroll-content> mengekspos progress gulir dan jarak bantuan.
setupSheet(element, options?) mengatur sheet dari efek framework atau hook siklus hidup.

Capacitor Model Tata Letak

Default viewport lembaran 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" context: Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `alternatives_cta_questions`). Halaman/area: Halaman perbandingan alternatif Capacitor live-update. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman alternatives.astro. Simpanlah istilah produk/merek dan istilah pengembang Capgo secara tepat. Kunci pesan `alternatives_cta_questions` (Pertanyaan Tindakan Alternatif). | Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `appflow_cta_questions`). Halaman/area: Halaman perbandingan/migrasi pemasaran Appflow. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman ionic-appflow.astro. Simpanlah istilah produk/merek dan istilah pengembang Capgo secara tepat. Kunci pesan `appflow_cta_questions` (Pertanyaan Tindakan Appflow). | Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `capwesome_cta_questions`). Halaman/area: Halaman perbandingan Capawesome. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman capwesome.astro. Simpanlah istilah produk/merek dan istilah pengembang Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan Tindakan Capwesome). | Halaman/area: Halaman pelayanan konsultasi. Peran: Judul bagian atau tagline. Dilihat di: halaman consulting.astro. Simpanlah istilah produk/merek dan istilah pengembang Capgo secara tepat. Kunci pesan `consulting_faq_subtitle` (Judul Subjudul FAQ Konsultasi). | Halaman/area: Halaman perbandingan/migrasi pemasaran Appflow. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman ionic-appflow.astro, halaman ionic-enterprise-plugins.astro, halaman solusi/ionic-enterprise-plugins.astro. Kunci pesan `appflow_plugins_or` (Appflow Plugins Atau).

ketika suatu kasus pengguna memerlukan perilaku yang berbeda. visualViewport Pengaturan keyboard diaktifkan secara default. Lembaran mendengarkan preventScroll resize dan scroll events, menambahkan offset keyboard ke viewport, dan fokus kontrol dengan

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.

Paket berjalan di layer web. Tidak menampilkan lembaran native UIKit atau Android bottom sheets, sehingga aplikasi Anda tetap memiliki kontrol gaya penuh sambil menghormati keterbatasan WebView yang berlaku di __CAPGO_KEEP_0__.

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

Sheet Panjang	Detent

Sidebar	Lightbox

Lanjutkan dari @capgo/capacitor-sheets

Jika Anda menggunakan @capgo/capacitor-sheets untuk merencanakan pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugins oleh Capgo Tambahkan atau Perbarui Plugins untuk detail implementasi di Tambahkan atau Perbarui 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.