@capgo/capacitor-sheets

@Capacitor/__CAPGO_KEEP_1__-sheets

Bangun lembaran kertas, drawer, dialog, toast, lightbox, kartu, dan lapisan halaman di mana saja __CAPGO_KEEP_0__ frontend. GitHub

Tidak bergantung pada 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, pergerakan 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 membutuhkan overlay mobile berkualitas tinggi tanpa menerapkan framework UI tertentu. Ini dikirim sebagai elemen kustom, sehingga paket inti tidak memiliki ketergantungan runtime React, Vue, Angular, Svelte, atau Solid.

Pakai ketika Anda membutuhkan:

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 penuh halaman yang masuk dari sisi
efek stack, kedalaman, dan paralaks 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

Koverasi Usecase

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

Inti API

<cap-sheet> mengatur keadaan presentasi, detent, penempatan, gestur, aksesibilitas, dan event.
<cap-sheet-trigger> mengumumkan aksi present, tutup, toggle, dan detent-step.
<cap-sheet-view> menempatkan overlay dan menerapkan offset area yang aman dan keyboard.
<cap-sheet-backdrop> mengrender backdrop yang sinkron dengan progress.
<cap-sheet-content> mengrender permukaan sheet.
<cap-sheet-handle> menyediakan 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> mengekspos progress peramban dan jarak bantuan.
setupSheet(element, options?) mengatur sheet dari efek framework atau hook siklus hidup.

Capacitor Model Tata Letak

Default viewport __CAPGO_KEEP_0__ membaca env(safe-area-inset-*) dan gaya 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 suatu kasus pengguna memerlukan perilaku yang berbeda.

Pengaturan keyboard diaktifkan secara default. Lembar kerja mendengarkan visualViewport resize dan scroll events, menambahkan offset keyboard ke viewport, dan fokus kontrol dengan preventScroll agar input tetap terlihat di atas keyboard perangkat lunak.

Paket ini berjalan di layer web. Tidak menampilkan lembar kerja native UIKit atau Android, sehingga aplikasi Anda tetap memiliki kendali gaya penuh sambil menghormati keterbatasan WebView yang berlaku di Capacitor.

Demos Dan Taman Bermain

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

Sheet Panjang	Detent

Sidebar	Lightbox

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