Indipendente dal framework
Utilizza gli elementi personalizzati basati su standard direttamente o utilizza gli aiuti di configurazione per React, Vue, Angular, Svelte e Solid.
Capacitor pronto
Rispetta le aree sicure, il movimento del tastiera, le gestualità di bordo native e l'oscuramento del colore del tema WebView dal layer web.
Ogni forma di foglio
Componi le schede in fondo, i cassetti laterali, le schede in alto, i dialoghi centrati, le tosticine, le schede distaccate, le carte, le pagine e le 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 è per le Capacitor app che necessitano di sovrapposizioni mobili di alta qualità senza adottare un framework UI specifico. Si distribuisce 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 sovrapposizioni di tipo toast
- schede persistenti che mantengono l'app dietro di loro interattiva
- schermate intere che entrano da un bordo
- effetti di pila, profondità e parallassi guidati dal progresso della scheda
- aiuti di scorrimento che espongono valori di progresso e distanza
- Capacitor-sicuro layout per notch, indicatori di casa, tagli di Android e tastiere software
Copertura dei casi d'uso
Sezione intitolata “Copertura dei casi d'uso”| Caso d'uso | Capgo Schema delle schede |
|---|---|
| Scheda lunga | cap-sheet con contenuto naturale scorrimento o cap-scroll |
| Foglio con Detent | detents="18em 32em" più stepTo() o un trigger di passo |
| Sidebar | content-placement="left" o content-placement="right" |
| Bottom Sheet | predefinito content-placement="bottom" |
| Foglio con tastiera | native-focus-scroll-prevention e gestione dell'offset della finestra di visualizzazione |
| Toast | inert-outside="false", focus-trap="false", e nessuna chiusura esterna |
| Foglio Distaccato | cap-sheet-special-wrapper con 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 Parallattica | cap-sheet-outlet con cap-scroll trasformazioni guidate dal progresso |
| Pagina | contenuto a schermo intero che entra da un bordo |
| Lightbox | content-placement="center" con sfondo e contenuto multimediale |
| Fascia persistente con detent | default-presented, swipe-dismissal="false"e inert-outside="false" |
| Carta | contenuto di fascia compatta centrato |
Core API
Sezione intitolata “Core API”<cap-sheet>gestisce lo stato di presentazione, le detente, 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 sicura e tastiera.<cap-sheet-backdrop>rende un retroallo di sincronizzazione progressiva.<cap-sheet-content>rende la superficie della scheda.<cap-sheet-handle>fornisce controlli di trascinamento e detentistica della tastiera.<cap-sheet-stack>coordinata le schede sovrapposte.<cap-sheet-outlet>esporre il progresso della scheda per effetti di pagina, profondità e parallasse.<cap-scroll>e<cap-scroll-content>esporre progresso e distanza di scorrimento degli aiuti.setupSheet(element, options?)configura una scheda da effetti o hook di ciclo di vita del framework.
Modello di layout Capacitor
Sezione intitolata “Capacitor Layout Model”La scheda di default visualizza la finestra di visualizzazione. 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.
Il trattamento del tastiera è abilitato di default. La finestra ascolta gli eventi di ridimensionamento e di scorrimento, aggiunge un offset della tastiera al viewport e mette a fuoco i controlli con visualViewport in modo che gli input rimangano visibili sopra il software della tastiera. preventScroll Il pacchetto esegue nel layer web. Non rende le finestre native di UIKit o Android, quindi il tuo app mantiene il controllo dello styling mentre rispetta le restrizioni del 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.
Sezione intitolata “Esempi e Laboratori”
Gli esempi animati WebP per ogni caso d'uso supportato sono inclusi nella repository README. Gli esempi sono disponibili anche come laboratori StackBlitz:Demos e Laboratori
| Foglio Lungo | Detenti |
|---|---|
 |  |
| 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
Sezione intitolata “Continua da @capgo/capacitor-sheets”Se stai utilizzando @capgo/capacitor-sheets per pianificare il lavoro di plugin nativo, connettilo con Capgo Directory dei Plugin per il flusso di lavoro del prodotto in Capgo Directory dei Plugin Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo Aggiunta o Aggiornamento dei Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin, Alternative per Plugin Enterprise Ionic per il workflow del prodotto in Alternative per Plugin Enterprise Ionic, e Capgo Costruzione Nativa per il workflow del prodotto in Capgo Costruzione Nativa.