@capgo/capacitor-sheets

Costruisci fogli, schede, dialoghi, avvisi, finestre di popup, schede e sovraintesti in qualsiasi Capacitor frontend.

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 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

Autoretiene con em, rem, unità di visualizzazione, calc(), e variabili CSS mentre la dimensione predefinita rimane em basata.

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 simili a toast
schede persistenti che mantengono l'app dietro di loro interattiva
finestre a schermo che si aprono da un angolo
effetti di sovrapposizione, profondità e parallassi guidati dal progresso della scheda
aiuti al scrolling che espongono valori di progresso e distanza
Capacitor-safe layout for notches, home indicators, Android cutouts, and software keyboards

Copertura dei casi d'uso

Caso d'uso	Schede Capgo pattern
Scheda lunga	`cap-sheet` con contenuto di scorrimento naturale o `cap-scroll`
Tabella con Detent	`detents="18em 32em"` più `stepTo()` o un trigger a 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
Cartella Distaccata	`cap-sheet-special-wrapper` con margini e raggio personalizzati
Pagina da Inferiore	contenuto di cartella da inferiore di altezza completa
Cartella da Cima	`content-placement="top"`
Cartella con sovrapposizione	`cap-sheet-stack` con variabili di profondità
Cartella con Profondità	`cap-sheet-outlet` e trasformazioni guidate dal progresso
Pagina Parallasse	`cap-sheet-outlet` con `cap-scroll` progressivo
Pagine	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

<cap-sheet> gestisce lo stato di presentazione, le detente, la posizione, i gesti, l'accessibilità e gli eventi.
<cap-sheet-trigger> dichiara le 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 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 distanza di scorrimento aiuto.
setupSheet(element, options?) configura una scheda da effetti o hook di ciclo del framework.

Capacitor Modello di layout

Il viewport predefinito della scheda legge env(safe-area-inset-*) e 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 al viewport 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 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 Giardini di Giochi”

Animated WebP demos for every supported usecase ship in the repository README. The examples are also available as StackBlitz playgrounds:

Carta Lunga Animata	Detentori

Barra laterale	Box di luce

Continua da @capgo/capacitor-sheets

Se stai utilizzando @capgo/capacitor-sheets per pianificare il lavoro dei 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, 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.