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 scheda
Componi schede inferiori, ante laterali, schede superiori, dialoghi centrali, toast, schede distaccate, schede, pagine e lightbox.
CSS moderno
Autoretiene con em, rem, unità 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 necessitano di sovraimposte mobili di alta qualità senza adottare un framework UI 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:
- schede inferiori con uno o più detenti
- barre laterali sinistra o destra e schede superiori
- dialoghi centrati, lightbox, schede, e sovraimposte di tipo toast
- schede persistenti che mantengono l'app dietro di loro interattiva
- finestre a schermo che si aprono da un bordo
- effetti di sovrapposizione, profondità e parallasse guidati dal progresso della scheda
- 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”| Caso d'uso | Schede Capgo pattern |
|---|---|
| Scheda lunga | cap-sheet con contenuto naturale scorrimento o cap-scroll |
| Tabella con Detent | detents="18em 32em" più stepTo() o un trigger di passo |
| Barra laterale | content-placement="left" o content-placement="right" |
| Bottom Sheet | predefinito content-placement="bottom" |
| Tabella con tastiera | native-focus-scroll-prevention e gestione dell'offset della finestra di visualizzazione |
| Toast | inert-outside="false", focus-trap="false", e nessuna chiusura con click esterno |
| Foglio Distaccato | cap-sheet-special-wrapper più margini e raggio personalizzati |
| Pagina da Inferiore | contenuto di foglio inferiore a tutta altezza |
| Foglio Superiore | content-placement="top" |
| Foglio con sovrapposizione | cap-sheet-stack con variabili di profondità |
| Foglio con Profondità | cap-sheet-outlet e trasformazioni guidate dal progresso |
| Pagina Parallasse | cap-sheet-outlet con cap-scroll progresso guidato |
| 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"Foglio persistente con detent inert-outside="false" |
| Card | contenuto di foglio compattato al centro |
Core API
Sezione intitolata “Core API”<cap-sheet>gestisce lo stato di presentazione, le detent, la posizione, i gesti, l'accessibilità e gli eventi.<cap-sheet-trigger>dichiarare azioni present, dismiss, toggle e detent-step.<cap-sheet-view>posiziona l'overlay e applica offset di area di sicurezza e tastiera.<cap-sheet-backdrop>rende un retroallo di sincronizzazione di avanzamento.<cap-sheet-content>rende la superficie della scheda.<cap-sheet-handle>fornisce controlli di trascinamento e detent di tastiera.<cap-sheet-stack>coordina schede sovrapposte.<cap-sheet-outlet>esporre il progresso della scheda ai effetti di profondità, pagina e parallasse.<cap-scroll>e<cap-scroll-content>esporre progresso e aiuti di scroll e distanza.setupSheet(element, options?)configura una scheda da effetti o hook di ciclo di vita del framework.
Capacitor Modello di layout
Sottosezione intitolata “Capacitor Modello di layout”Il viewport predefinito della scheda legge env(safe-area-inset-*) e lo stile Capacitor-style --safe-area-inset-* le variabili di fallback, quindi applica le selezionate come padding intorno all'overlay. safe-area="auto" proteggere tutte le aree; utilizza safe-area="bottom left right" o safe-area="none" quando un caso d'uso richiede un comportamento diverso.
La gestione del tastiera è abilitata di default. La finestra di dialogo ascolta gli eventi di ridimensionamento e di scorrimento, aggiunge un offset della tastiera alla finestra di visualizzazione e mette a fuoco i controlli con visualViewport così gli input rimangono visibili sopra la tastiera software. preventScroll Il pacchetto esegue nel layer web. Non rende le schede inferiori native di UIKit o Android, quindi l'app conserva il controllo dello stile completo mentre rispetta le restrizioni della finestra di visualizzazione 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.
Sottosezione intitolata “Demos e Laboratori”
I demo animati WebP per ogni caso d'uso supportato sono inclusi nel repository README. Gli esempi sono disponibili anche come laboratori StackBlitz:Demos e Laboratori
| Foglio Lungo | Detent |
|---|---|
 |  |
| Barra laterale | Box di luce |
|---|---|
 |  |
- Griglia completa di demo
- Giocattolo React
- Giocattolo Vue
- Giocattolo Angular
- Gioco di prova con Svelte
- Gioco di prova con Solid
Continua da @capgo/capacitor-sheets
Sottosezione intitolata “Continua da @capgo/capacitor-sheets”Se stai utilizzando @capgo/capacitor-sheets per pianificare il lavoro di plugin nativo, connettilo con Directory dei plugin Capgo per il flusso di lavoro del prodotto in Directory dei plugin Capgo Plugin Capacitor sviluppati da Capgo per i dettagli di implementazione in Plugin Capacitor sviluppati da Capgo, Aggiunta o Aggiornamento dei Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin, Alternative per Plugin Enterprise Ionic per il flusso di lavoro del prodotto in Alternative per Plugin Enterprise Ionic, e Capgo Costruzione Nativa per il flusso di lavoro del prodotto in Capgo Costruzione Nativa.