@capgo/capacitor-Blätter

Erstellen Sie Silk-ähnliche Blätter, Schubladen, Dialoge, Toasts, Lichtboxen, Karten und Überlagerungen von Seiten in jedem Capacitor-Frontend.

Loslegen GitHub

frameworkunabhängig

Verwenden Sie benutzerdefinierte Standards-Elemente direkt oder verwenden Sie Setup-Helfer für React, Vue, Angular, Svelte und Solid.

Capacitor-bereit

Respektieren Sie sichere Bereiche, Tastaturbewegungen, native Edge-Gesten und WebView-Theme-Farben-Dämpfung vom Web-Schicht.

Jede Form der Blätter

Komposition von unteren Blättern, Seitenfächern, oberen Blättern, zentrierten Dialogen, Toasts, abgetrennten Blättern, Karten, Seiten und Lichtboxen.

Modernes CSS

Autoren von Detents mit em, rem, viewport-Einheiten calc(), und CSS-Variablen, während die Standardgröße bleibt em basierend.

Wann es verwenden

@capgo/capacitor-sheets ist für Capacitor-Apps, die hochwertige mobile Überlagerungen benötigen, ohne eine bestimmte UI-Framework zu übernehmen. Es wird als benutzerdefinierte Elemente geliefert, daher hat das Kernpaket keine Abhängigkeit von React, Vue, Angular, Svelte oder Solid.

Verwenden Sie es, wenn Sie benötigen:

untere Blätter mit einem oder mehreren Detents
links oder rechts Seitenfächer und oberes Blatt
zentrierte Dialoge, Lichtboxen, Karten und Toast-ähnliche Überlagerungen
persistente Blätter, die die App hinter ihnen interaktiv lassen
vollbildige Überlagerungen, die von einer Kante eintraten
Stack, Tiefe und Parallax-Effekte, die durch Fortschritt der Blätter angetrieben werden
Scroll-Hilfen, die Fortschritt und Entfernungswerte offenlegen
Capacitor-sichere Layout für Notch, Home-Indikatoren, Android-Ausschnitte und Software-Tastaturen

Anwendungsbereichsabdeckung

Anwendungsbereich	Capgo Blättermuster
Langes Blatt	`cap-sheet` mit natürlicher Scrollbar oder `cap-scroll`
Blatt mit Detent	`detents="18em 32em"` plus `stepTo()` oder ein Schritt-Trigger
Seitenleiste	`content-placement="left"` oder `content-placement="right"`
Unterblatt	Standard `content-placement="bottom"`
Blatt mit Tastatur	`native-focus-scroll-prevention` und visueller Ansichtsverschiebung
Toast	`inert-outside="false"`, `focus-trap="false"`, und keine Außenklick-Beendigung
Abgesperrter Blatt	`cap-sheet-special-wrapper` plus benutzerdefinierte Ränder und Radius
Seite von unten	vollhöheiger Blattinhalt von unten
Oberes Blatt	`content-placement="top"`
Blatt mit Stapelung	`cap-sheet-stack` mit Tiefenvariablen
Blatt mit Tiefe	`cap-sheet-outlet` und progress-getriebenen Transformations
Parallax-Seite	`cap-sheet-outlet` mit `cap-scroll` Fortschritt
Seite	Vollbildinhalt, der von einer Kante eintritt
Lightbox	`content-placement="center"` mit Hintergrund und Medieninhalt
Persistenter Blatt mit Detent	`default-presented`, `swipe-dismissal="false"`und `inert-outside="false"`
Karte	Kompakter zentrierter Blattinhalt

Kern API

<cap-sheet> besitzt die Präsentationszustände, -detents, -position, -gesten, -Barrierefreiheit und -ereignisse.
<cap-sheet-trigger> erklärt die Präsentations-, Abbruch-, Toggle- und -detent-Schritte.
<cap-sheet-view> positioniert das Overlay und setzt sichere Bereich- und Tastatur-Abstände.
<cap-sheet-backdrop> zeigt ein progress-synchronisiertes Hintergrundbild an.
<cap-sheet-content> zeigt die Blattfläche an.
<cap-sheet-handle> bietet Drag- und Tastatur-Steuerung für Detents.
<cap-sheet-stack> koordiniert gestapelte Blätter.
<cap-sheet-outlet> macht die Blattfortschritte auf der Seite, Tiefe und Parallax-Effekte zugänglich.
<cap-scroll> und <cap-scroll-content> macht die Scroll-Fortschritte und -Distanzen zugänglich.
setupSheet(element, options?) konfiguriert ein Blatt aus Framework-Effekten oder Lifecycle-Hooks.

Capacitor Layout-Modell

Die Standardansicht des Blattes liest env(safe-area-inset-*) und Capacitor-stil --safe-area-inset-* Stornierungsvariablen, dann wird die ausgewählte Kante als Abstand um das Overlay herum angewendet. safe-area="auto" schützt alle Kanten; verwenden safe-area="bottom left right" oder safe-area="none" Klicken Sie auf

wenn ein Use-Case eine andere Verhaltensweise benötigt. visualViewport Die Tastatureingabe ist standardmäßig aktiviert. Das Blatt hört auf preventScroll Größen- und Scrollereignisse, fügt einem Tastaturabstand zur Ansicht hinzu und fokussiert Steuerungselemente mit

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.

Die Pakete laufen im Weblayer. Sie rendern keine native UIKit- oder Android-Bottom-Sheets, so dass Ihre App den volle Stilkontrolle behält, während sie die WebView-Einschränkungen respektiert, die in __CAPGO_KEEP_0__ relevant sind.

Animierte WebP-Demos für jeden unterstützten Einsatzfall liegen im Repository-README vor. Die Beispiele sind auch als StackBlitz-Spielplätze verfügbar:

Langer Blatt	Kraftlinien

Seitenleiste	Lightbox

Weitermachen von @capgo/capacitor-Blätter

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Blätter verwenden @capgo/capacitor-Blätter um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins durch Capgo Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren Ionic Enterprise-Plugin-Alternativen für den Produktworkflow in Ionic Enterprise-Plugin-Alternativen und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.