@capgo/capacitor-schede

Crea schede, finestre laterali, dialoghi, avvisi, finestre di sfondo, schede e sovrapposizioni di pagina in qualsiasi Capacitor frontend.

Inizia GitHub

Agnostico rispetto al 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 scheda

Componi fogliere di fondo, finestre laterali, fogliere di testa, dialoghi centrati, avvisi, fogliere di testa distaccati, schede, pagine e lightbox.

CSS moderno

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

Quando Usarlo

@capgo/capacitor-sheets è per le Capacitor app che necessitano di sovrapposti 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 fogliere di fondo con uno o più detenti
di barre laterali sinistra o destra e fogliere di testa
dialoghi centrati, finestre di dialogo leggere, 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 sfocatura guidati dal progresso della scheda
aiuti per la scroll 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 Modelli di fogli
Foglio Lungo	`cap-sheet` con scorrimento di contenuto naturale o `cap-scroll`
Foglio con Detent	`detents="18em 32em"` più `stepTo()` o un trigger a passo
Barra laterale	`content-placement="left"` o `content-placement="right"`
Foglio in basso	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 con click fuori
Foglio Distaccato	`cap-sheet-special-wrapper` con margini e raggio personalizzati
Pagina dal Basso	contenuto di foglio inferiore di altezza completa
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 Parallela	`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
Fascia persistente con detent	`default-presented`, `swipe-dismissal="false"`, e `inert-outside="false"`
Carta	contenuto di fascia compatta al centro

Nucleo 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 per effetti di pagina, profondità e parallasse.
<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.

Layout Model Capacitor

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 gli eventi di ridimensionamento e di scorrimento, aggiunge un offset del tastierino al viewport e mette a fuoco i controlli con visualViewport così che gli input rimangano visibili sopra il tastierino software. preventScroll Il pacchetto esegue nel layer web. Non rende fogli nativi UIKit o Android, quindi il tuo app mantiene 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.

Alternativi

Il repository contiene esempi di WebP animati per ogni caso d'uso supportato. Gli esempi sono disponibili anche come laboratori StackBlitz:

Sheet Lunga	Detent

Barra laterale	Box di visualizzazione

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 Aggiungere o Aggiornare Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin Sostituti di Plugin Enterprise Ionic per il flusso di lavoro del prodotto in Sostituti di Plugin Enterprise Ionic, e Capgo Build Nativo per il flusso di lavoro del prodotto in Capgo Build Nativo.