Agnostico rispetto ai 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 della WebView dal layer web.
Ogni forma di foglio
Componi fogli laterali, finestre laterali, fogli in alto, dialoghi centrati, toast, fogli distaccati, schede, pagine e lightbox.
CSS moderno
Definisci detentazioni con em, rem, unità di visualizzazione del viewport, calc(), e variabili CSS mentre la dimensione predefinita rimane em basata.
When Usarlo
Sottosezione intitolata “Quando Usarlo”@capgo/capacitor-sheets è per le Capacitor app che hanno bisogno di sovraimposti mobili di alta qualità senza adottare un framework di interfaccia utente specifico. Si distribuisce come elementi personalizzati, quindi il pacchetto di base non dipende da runtime di React, Vue, Angular, Svelte o Solid.
Usalo quando hai bisogno di:
- schede in fondo con uno o più detenti
- barre laterali sinistra o destra e schede in alto
- dialoghi centrati, lightbox, schede e sovraimposti di tipo toast
- schede persistenti che mantengono l'app dietro di loro interattiva
- sovraimposti di pagina completa che entrano da un bordo
- effetti di pila, profondità e parallasse guidati dal progresso della scheda
- aiuti di scorrimento che espongono valori di progresso e distanza
- disposizione di layout Capacitor-sicura 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 Fogli di modelli |
|---|---|
| Foglio Lungo | cap-sheet con scorrimento di contenuti naturali o cap-scroll |
| Foglio con Detent | detents="18em 32em" più stepTo() o un trigger di passo |
| Barra laterale | content-placement="left" o content-placement="right" |
| Foglio di lavoro inferiore | predefinito content-placement="bottom" |
| Foglio di lavoro 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 di lavoro distaccato | cap-sheet-special-wrapper più margini personalizzati e raggio |
| Pagina da sotto | contenuto di foglio di lavoro inferiore di altezza completa |
| Pannello Superiore | content-placement="top" |
| Pannello con sovrapposizione | cap-sheet-stack con variabili di profondità |
| Pannello con Profondità | cap-sheet-outlet e trasformazioni guidate dal progresso |
| Pagina Parallax | cap-sheet-outlet con cap-scroll progresso |
| Pagina | contenuto full-viewport che entra da un bordo |
| Lightbox | content-placement="center" con sfondo e contenuto multimediale |
| Finestra persistente con detente | default-presented, swipe-dismissal="false", e inert-outside="false" |
| Carta | contenuto della finestra compatta centrato |
<cap-sheet>gestisce lo stato di presentazione, i detenti, la posizione, i gesti, l'accessibilità e gli eventi.<cap-sheet-trigger>declara le azioni present, dismiss, toggle e detent-step.<cap-sheet-view>posiziona l'overlay e applica gli offset di sicurezza e del tastierino.<cap-sheet-backdrop>rende un retroallo del progresso sincronizzato.<cap-sheet-content>rende la superficie della finestra.<cap-sheet-handle>fornisce controlli di trascinamento e tastierino per i detenti.<cap-sheet-stack>coordinate stackate le foglie.<cap-sheet-outlet>esporge il progresso della foglia alla pagina, profondità e effetti parallattici.<cap-scroll>e<cap-scroll-content>esporre progresso e aiuti di scorrimento.setupSheet(element, options?)configura una foglia da effetti del framework o hook di ciclo di vita.
Capacitor Modello di layout
Sezione intitolata “Capacitor Modello di layout”La vista predefinita della foglia di visualizzazione legge env(safe-area-inset-*) e Capacitor-stile --safe-area-inset-* variabili di fallback, quindi applica le selezionate come padding intorno all'overlay. safe-area="auto" proteggere tutte le aree; utilizzare safe-area="bottom left right" o safe-area="none" When un caso richiede un comportamento diverso.
La gestione del tastierino è abilitata di default. La finestra di dialogo ascolta gli eventi di ridimensionamento e di scorrimento, aggiunge un offset del tastierino al viewport e mette a fuoco i controlli con visualViewport così gli input rimangono visibili sopra il tastierino software. preventScroll Il pacchetto esegue nel layer web. Non rende le finestre di dialogo native di UIKit o Android, quindi l'app conserva il controllo di stile completo 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.
Sottosezione intitolata “Demos e Laboratori”
Il repository contiene demo animate di WebP per ogni caso d'uso supportato. Gli esempi sono disponibili anche come laboratori StackBlitz:Finestra di dialogo lunga
| Detenti | Demo animata di Finestra di dialogo lunga per @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets |
|---|---|
 |  |
| Barra laterale | Box di evidenziazione |
|---|---|
 |  |
- Griglia di demo completa
- Giocattolo React
- Giocattolo Vue
- Giocattolo Angular
- Giocattolo Svelte
- Giocattolo Solid
Continua da @capgo/capacitor-sheets
Sezione intitolata “Continua da @capgo/capacitor-sheets”If sei stai utilizzando @capgo/capacitor-sheets per pianificare il lavoro di plugin nativi, 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, Aggiungere o Aggiornare i Plugin per i dettagli di implementazione in Aggiungere o Aggiornare i Plugin, Sostituti di Plugin Enterprise Ionic per il flusso di lavoro del prodotto in Sostituti di Plugin Enterprise Ionic, e Capgo Costruzioni Native per il workflow del prodotto in Capgo Costruzioni Native.