Indipendente dal framework
Utilizza elementi personalizzati basati su standard direttamente o utilizza aiuti di configurazione per React, Vue, Angular, Svelte e Solid.
Capacitor pronto
Rispetta aree sicure, movimento del tastiera, gesti di bordo nativi e riduzione del colore del tema WebView dal layer web.
Ogni forma di foglio
Componi fogliere inferiori, menu laterali, fogliere superiori, dialoghi centrati, avvisi, fogliere distaccati, schede, pagine e box di luce.
CSS moderno
Sviluppa detenti con em, remunità di visualizzazione calc()e variabili CSS mentre la dimensione predefinita rimane em basata.
Quando Usarlo
Sottosezione intitolata “Quando Usarlo”@capgo/capacitor-sheets è destinata agli app Capacitor che richiedono sovrapposti mobili di alta qualità senza adottare un framework di interfaccia utente specifico. Viene spedito come elementi personalizzati, quindi il pacchetto di base non dipende da runtime React, Vue, Angular, Svelte o Solid.
Usalo quando hai bisogno di:
- fogliere inferiori con uno o più detenti
- menu laterali sinistro o destro e fogliere superiori
- dialoghi centrati, finestre di luce, schede e soffioni simili a toast
- finestre persistenti che mantengono l'app dietro di loro interattiva
- soffioni di pagina intera che entrano da un angolo
- effetti di pila, profondità e sfocatura guidati dal progresso della finestra
- aiuti di scorrimento che espongono valori di progresso e distanza
- Capacitor-safe layout for notches, home indicators, Android cutouts, and software keyboards
Copertura dei casi d'uso
Sottosezione intitolata “Copertura dei casi d'uso”| Usecase | Capgo Fogli di modella |
|---|---|
| Foglio Lungo | cap-sheet con scorrimento di contenuto naturale o cap-scroll |
| Foglio con Detent | detents="18em 32em" più stepTo() o un trigger a passi |
| Barra laterale | content-placement="left" o content-placement="right" |
| Foglio in basso | predefinito content-placement="bottom" |
| Foglio con tastiera | native-focus-scroll-prevention e gestione dell'offset della vista visiva |
| Toast | inert-outside="false", focus-trap="false"e nessuna chiusura con click esterno |
| Finestra di dialogo distaccata | cap-sheet-special-wrapper più margini e raggio personalizzati |
| Pagina dal Basso | contenuto di finestra di dialogo dal basso di altezza completa |
| Finestra di dialogo in Alto | content-placement="top" |
| Finestra di dialogo con sovrapposizione | cap-sheet-stack con variabili di profondità |
| Finestra di dialogo con Profondità | cap-sheet-outlet e trasformazioni guidate dal progresso |
| Pagina a Parallasso | cap-sheet-outlet con cap-scroll progresso |
| Pagina | contenuto a schermo intero che entra da un bordo |
| Lightbox | content-placement="center" con sfondo e contenuto multimediale |
| Foglio persistente con detent | default-presented, swipe-dismissal="false"e inert-outside="false" |
| Carta | contenuto di foglio compattato al centro |
Core API
Sezione intitolata “Core API”<cap-sheet>gestisce lo stato di presentazione, i detenti, la posizione, i gesti, l'accessibilità e gli eventi.<cap-sheet-trigger>dichiarare present, annulla, alternare e azioni di detent-step.<cap-sheet-view>posiziona l'overlay e applica offset sicuri e tastiera.<cap-sheet-backdrop>rende un retroallo di sincronizzazione progressiva.<cap-sheet-content>rende la superficie della finestra.<cap-sheet-handle>fornisce controlli di trascinamento e tastiera per detenti.<cap-sheet-stack>coordina le finestre sovrapposte.<cap-sheet-outlet>esporre il progresso della finestra a pagina, profondità e effetti parallax.<cap-scroll>e<cap-scroll-content>esporre progresso di scorrimento e aiuti di distanza.setupSheet(element, options?)configura una finestra da effetti o hook di ciclo di vita del framework.
Capacitor Modello di layout
Sezione intitolata “Capacitor Modello di layout”La vista predefinita della scheda legge env(safe-area-inset-*) e Capacitor-stile --safe-area-inset-* le variabili di fallback, quindi applica le selezioni di bordo come padding intorno all'overlay. safe-area="auto" proteggere tutte le edicole; utilizzare safe-area="bottom left right" o safe-area="none" quando un caso d'uso richiede un comportamento diverso.
Il trattamento del tastiera è abilitato di default. La scheda ascolta gli eventi di ridimensionamento e di scorrimento, aggiunge un offset della tastiera alla vista, e mette a fuoco i controlli con visualViewport così gli input rimangono visibili sopra il software tastiera. preventScroll Il pacchetto esegue nel layer web. Non rende le schede native UIKit o Android, quindi l'app mantiene il controllo di stile completo mentre rispetta le restrizioni WebView che contano in __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.
Esempi e aree di gioco
Sezioni intitolate “Demos e Playground”I demo animati WebP per ogni caso di utilizzo supportato sono inclusi nel repository README. Gli esempi sono anche disponibili come playground StackBlitz:
| Foglio di lavoro lungo | Detent |
|---|---|
 |  |
| Barra laterale | Box di luce |
|---|---|
 |  |
- Griglia completa dei demo
- Giocattolo React
- Giocattoli Vue
- Giocattoli Angular
- Giocattoli Svelte
- Giocattoli Solid
Continua da @capgo/capacitor-sheets
Sezione intitolata “Continua da @capgo/capacitor-sheets”Se stai utilizzando @capgo/capacitor-sheets per pianificare il lavoro dei plugin nativi, connettilo con Directory dei plugin Capgo flusso di lavoro del prodotto in Directory dei plugin Capgo Plugin Capacitor sviluppati da Capgo per i dettagli di implementazione nei plugin Capacitor di Capgo, Aggiungere o Aggiornare Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin, Alternative per Plugin Enterprise di Ionic per il workflow del prodotto in Alternative per Plugin Enterprise di Ionic, e Capgo Build Nativi per il workflow del prodotto in Capgo Build Nativi.