@capgo/capacitor-schede

Crea fogli, finestre, dialoghi, avvisi, lightbox, schede e sovrapposizioni di pagina 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 del tema WebView dal layer web.

Ogni forma di foglia

Componi fogliere di composizione, finestre laterali, fogliere superiori, dialoghi centrati, avvisi, fogliere distaccati, schede, pagine e finestre di luce.

CSS moderno

Autore dei detent con em, rem, unità di viewport calc(), e variabili CSS mentre la dimensione predefinita rimane em basato.

Quando Usarlo

@capgo/capacitor-sheets è destinato agli Capacitor app che necessitano di sovraimposte 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 React, Vue, Angular, Svelte o Solid.

Usalo quando hai bisogno:

soffioni inferiori con uno o più detenti
barre laterali sinistra o destra e soffioni superiori
dialoghi centrati, lightbox, schede e sovraimposte di tipo toast
soffioni persistenti che mantengono l'app dietro di loro interattiva
sovraimposte di pagina completa che entrano da un bordo
effetti di pila, profondità e parallasse guidati dal progresso della soffione
aiuti di scorrimento che espongono valori di progresso e distanza
Capacitor-disegno sicuro per notch, indicatori di home, Android cutouts e tastiere software

Copertura dei casi d'uso

Caso d'uso	Capgo Schema foglio
Foglio lungo	`cap-sheet` con scorrimento di contenuto naturale o `cap-scroll`
Foglio con detent	`detents="18em 32em"` più `stepTo()` o un trigger di fase
Barra laterale	`content-placement="left"` o `content-placement="right"`
Alternativi: cosa cercare	default `content-placement="bottom"`
Foglio con tastiera	`native-focus-scroll-prevention` and visual viewport offset handling
Toast	`inert-outside="false"`, `focus-trap="false"`e nessuna chiusura esterna
, e nessuna chiusura esterna	`cap-sheet-special-wrapper` margini personalizzati e raggio
più margini e raggio personalizzati	Contenuto della schermata a fondo di pagina
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 parallattica	`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 multimediale
Foglio persistente con detent	`default-presented`, `swipe-dismissal="false"`, e `inert-outside="false"`
Carta	contenuto compatto di foglio centrato

Core API

<cap-sheet> gestione dello stato di presentazione, detentori, posizionamento, gesti, accessibilità e eventi.
<cap-sheet-trigger> dichiarano le azioni present, dismissione, 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 del foglio.
<cap-sheet-handle> fornisce controlli di detentamento a trascinamento e tastiera.
<cap-sheet-stack> coordina fogli sovrapposti.
<cap-sheet-outlet> esporge il progresso del foglio a pagina, profondità e effetti parallittici.
<cap-scroll> e <cap-scroll-content> esporge progresso e aiuti di scorrimento.
setupSheet(element, options?) configura un foglio da effetti o hook di ciclo di vita del framework.

Modello di layout Capacitor

Il viewport predefinito del foglio 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 così che gli input rimangano visibili sopra il tastierino software. 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.

Sottosezione intitolata “Demos E Playground”

Esempi animati WebP per ogni caso d'uso supportato sono disponibili nel repository README. Le esempi sono anche disponibili come playground StackBlitz:

Detent	Detents

Barra laterale	Box di luce

Continua da @capgo/capacitor-sheets

Se stai utilizzando capgo/capacitor-sheets per pianificare il lavoro di plugin nativi, connettilo 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 flusso di lavoro del prodotto nelle Alternative Plugin Enterprise Ionic Capgo Native Builds per il workflow del prodotto in Capgo Costruzioni Native.