@capgo/capacitor-sheets

Build Silk-style sheets, drawers, dialogs, toasts, lightboxes, cards, and page overlays in any Capacitor frontend.

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 foglia

Componi foglieretti in fondo, menu laterali, foglieretti in alto, dialoghi centrati, avvisi, foglieretti distaccati, schede, pagine e finestre di luce.

CSS moderno

Autore detenti con em, rem, unità di misura del viewport calc(), e variabili CSS mentre la dimensione predefinita rimane em basata.

Quando Usarlo

@capgo/capacitor-sheets è per le Capacitor app che hanno bisogno di sovrapposti 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 runtime di React, Vue, Angular, Svelte o Solid.

Usalo quando hai bisogno:

foglieretti in fondo con uno o più detenti
menu laterali sinistro o destro e foglieretti in alto
dialoghi centrati, finestre di luce, schede e sovrapposizioni di tipo toast
schede persistenti che mantengono l'app dietro di loro interattiva
sovrapposizioni a schermo intero che entrano da un bordo
effetti di pila, profondità e sfumature legati allo stato delle schede
aiuti per la scrollizzazione 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	Capgo Foglie di foglio
Foglia Lunga	`cap-sheet` con contenuto di scorrimento naturale o `cap-scroll`
Foglia con Detent	`detents="18em 32em"` più `stepTo()` o un trigger a passi
Barra laterale	`content-placement="left"` o `content-placement="right"`
Riquadro	predefinito `content-placement="bottom"`
Foglia 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 fuori
Foglio Distaccato	`cap-sheet-special-wrapper` con margini e raggio personalizzati
Foglio dalla Fine della Pagina	contenuto di foglio full-height nella parte inferiore
Foglio in Cima	`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
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"`, e `inert-outside="false"`
Card	contenuto compatto e centrato in una scheda

Sezione intitolata “Core API”

<cap-sheet> gestisce lo stato di presentazione, le detenzioni, la posizione, i gesti, l'accessibilità e gli eventi.
<cap-sheet-trigger> declara azioni di presentazione, di chiusura, di toggling e di detent-step.
<cap-sheet-view> posiziona l'overlay e applica offset di area sicura e tastiera.
<cap-sheet-backdrop> rende uno sfondo sincronizzato con il progresso.
<cap-sheet-content> rende la superficie della finestra.
<cap-sheet-handle> fornisce controlli di trascinamento e tastiera per le detenzioni.
<cap-sheet-stack> coordina finestre sovrapposte.
<cap-sheet-outlet> esporre il progresso della finestra ai pagine, alla profondità e agli effetti parallattici.
<cap-scroll> e <cap-scroll-content> esporre progresso di scorrimento e aiuti di distanza.
setupSheet(element, options?) configura una finestra da effetti o hook di ciclo di vita del framework.

Capacitor Layout Model

Il viewport di foglio predefinito 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; utilizzare 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. Il foglio ascolta visualViewport e gli eventi di ridimensionamento e di scorrimento, aggiunge un offset del tastierino al viewport e mette a fuoco i controlli con preventScroll così che gli input rimangano visibili sopra il tastierino software.

Il pacchetto esegue nel layer web. Non rende fogli nativi di UIKit o Android, quindi il tuo app mantiene il controllo di stile completo mentre rispetta le restrizioni del WebView che contano in Capacitor.

Demos e Playgrounds

Dimostrazioni animate WebP per ogni caso di utilizzo supportato sono presenti nel repository README. Gli esempi sono disponibili anche come playground StackBlitz:

Sheet Lunga	Detent

Barra laterale	Lightbox

Continua da @capgo/capacitor-sheets

Se stai utilizzando @capgo/capacitor-sheets per pianificare il lavoro di plugin nativo, collegalo 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 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 Build Nativo per il workflow del prodotto in Capgo Build Nativo.