Agnostico rispetto al framework
Utilizza elementi personalizzati basati su standard o utilizza 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 scheda
Componi schede in fondo, schede laterali, schede in cima, dialoghi centrati, avvisi, schede distaccate, schede, pagine e box di luce.
CSS moderno
Autore i detent con em, rem, unità di visualizzazione del viewport, calc(), e variabili CSS mentre la dimensione predefinita rimane em basato.
Quando Usarlo
Sezione intitolata “Quando Usarlo”@capgo/capacitor-sheets è destinato agli app Capacitor che hanno bisogno di sovraintesti 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 React, Vue, Angular, Svelte o Solid.
Usalo quando hai bisogno:
- sovraintesti inferiori con uno o più detenti
- left or right sidebars and top sheets
- dialoghi centrati, lightbox, schede e sovraintesti di tipo toast
- sovraintesti persistenti che mantengono l'app dietro di loro interattiva
- sovraintesti di pagina completa che entrano da un bordo
- effetti di pila, profondità e parallasse guidati dal progresso del sovraintesto
- 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
Sezione intitolata “Copertura dei casi d'uso”| Caso d'uso | Pattino Capgo per fogli |
|---|---|
| Foglio lungo | cap-sheet con scorrimento di contenuto naturale o cap-scroll |
| Foglio con detent | detents="18em 32em" più stepTo() o un trigger di step |
| Sidebar | content-placement="left" o content-placement="right" |
| Alternativi: domande per l'azione | default content-placement="bottom" |
| Foglio con tastiera | native-focus-scroll-prevention gestione dell'offset della viewport visiva |
| Toast | inert-outside="false", focus-trap="false"e nessuna chiusura esterna |
| Foglio Distaccato | cap-sheet-special-wrapper margi personalizzate e raggio |
| Dal Basso della Pagina | contenuto di foglio di lavoro di altezza completa |
| Top Sheet | content-placement="top" |
| Foglio di lavoro con sovrapposizione | cap-sheet-stack con variabili di profondità |
| Foglio di lavoro con profondità | cap-sheet-outlet e trasformazioni guidate dal progresso |
| Pagina parallasse | cap-sheet-outlet con cap-scroll progresso |
| Pagina | contenuto di viewport completo che entra da un bordo |
| Box di luce | content-placement="center" con sfondo e contenuto multimediali |
| Finestra persistente con detent | default-presented, swipe-dismissal="false", e inert-outside="false" |
| Carta | contenuto di finestra compatto al centro |
Core API
Sezione intitolata “Core API”<cap-sheet>gestisce lo stato di presentazione, detentori, posizionamento, gesti, accessibilità e eventi.<cap-sheet-trigger>declara le azioni present, annulla, toggle e detent-step.<cap-sheet-view>posiziona l'overlay e applica gli offset di area sicura e tastiera.<cap-sheet-backdrop>rende un sfondo sincronizzato con il progresso.<cap-sheet-content>rende la superficie della finestra.<cap-sheet-handle>fornisce controlli di detenzione per trascinamento e tastiera.<cap-sheet-stack>coordina fogli sovrapposti.<cap-sheet-outlet>esporge il progresso del foglio a pagina, profondità e effetti parallattici.<cap-scroll>e<cap-scroll-content>Esponi aiuti per il progresso e la distanza della scroll.setupSheet(element, options?)configura un foglio da effetti o hook di ciclo di vita del framework.
Modello di layout Capacitor
Modello di layout “Capacitor”La vista predefinita del foglio di visualizzazione legge env(safe-area-inset-*) e Capacitor-style --safe-area-inset-* 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 tastierino è abilitata di default. La scheda ascolta visualViewport resize e scroll eventi, aggiunge un offset del tastierino alla viewport e mette a fuoco i controlli con preventScroll gli input rimangono visibili sopra il tastierino del software.
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.
Scheda intitolata “Demos E Playground”
Section titled “Demos And Playgrounds”Esempi animati WebP per ogni caso d'uso supportato sono disponibili nella repository README. Gli esempi sono anche disponibili come playground StackBlitz:
| Detent | Detents |
|---|---|
 |  |
| Barra laterale | Box di lettura |
|---|---|
 |  |
- 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”Se stai utilizzando @capgo/capacitor-schede per pianificare il lavoro di plugin nativi, collegalo con Capgo Directory dei Plugin per il workflow del prodotto nella directory del Plugin Capgo. 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, Alternative per Plugin Enterprise Ionic per il workflow del prodotto nelle alternative del Plugin Enterprise di Ionic Capgo Native Builds per il workflow del prodotto nei costruzioni native Capgo.