@capgo/capacitor-Blätter

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

Loslegen GitHub

framework-agnostisch

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

Capacitor ist bereit

Respektieren Sie sichere Bereiche, Tastaturbewegungen, native Edge-Gesten und WebView-Theme-Farbverdimmung aus der Web-Schicht.

Jeder Blattformat

Komponenten für untere Blätter, Seitenleisten, oberste Blätter, zentrierte Dialoge, Toasts, abgetrennte Blätter, Karten, Seiten und Lichtboxen erstellen.

Moderne CSS

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

Wann Sie es verwenden sollten

@capgo/capacitor-sheets ist für Capacitor-Apps vorgesehen, die hochwertige mobile Überlagerungen benötigen, ohne eine bestimmte UI-Framework-Implementierung 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 angeordnete Seitenleisten und oberste Blätter
zentrierte Dialoge, Lightboxe, Karten und Toast-ähnliche Überlagerungen
persistente Blätter, die das App dahinter interaktiv halten
vollbildige Überlagerungen, die von einer Kante eintraten
Stack-, Tiefe- und Parallax-Effekte, die durch Fortschritt des Blattes 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 Blattschemata
Langes Blatt	`cap-sheet` mit natürlicher Scrollinhalt 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 Ansichtsversatz
Toast	`inert-outside="false"`, `focus-trap="false"`, und keine Außer-Klick-Beendigung
Abgespaltene Blatt	`cap-sheet-special-wrapper` plus benutzerdefinierte Ränder und Radius
Seite von unten	vollhöheiger Inhalt im unteren Blatt
Oberes Blatt	`content-placement="top"`
Blatt mit Stapelung	`cap-sheet-stack` mit Tiefenvariablen
Blatt mit Tiefe	`cap-sheet-outlet` und durch Fortschritt getriebene Transformationen
Parallax-Seite	`cap-sheet-outlet` mit `cap-scroll` Fortschritt
Seite	Vollbildinhalt, der von einer Kante eintritt
Lightbox	`content-placement="center"` mit Hintergrund und Medieninhalt
Persistente Schaltfläche mit Detent	`default-presented`, `swipe-dismissal="false"`, und `inert-outside="false"`
Karte	Kompakter, zentrierter Schaltflächeninhalt

Kern API

<cap-sheet> besitzt Präsentationszustand, Haltungen, Platzierung, Gesten, Barrierefreiheit und Ereignisse.
<cap-sheet-trigger> erklärt die Aktionen präsentieren, abblenden, umschalten und Schritt-Haltungen.
<cap-sheet-view> positioniert das Overlay und setzt sichere Bereich- und Tastatur-Abstände.
<cap-sheet-backdrop> zeigt einen progress-synchronisierten Hintergrund an.
<cap-sheet-content> zeigt die Oberfläche des Blatts an.
<cap-sheet-handle> bietet Drag- und Tastatur-Haltungssteuerungen an.
<cap-sheet-stack> koordiniert gestapelte Blätter.
<cap-sheet-outlet> offenbart den Fortschritt des Blatts an der Seite, Tiefe und Parallax-Effekte.
<cap-scroll> und <cap-scroll-content> offert Fortschritts- und Abstands-Hilfen für die Scrollfunktion.
setupSheet(element, options?) konfiguriert ein Blatt aus Framework-Effekten oder Lebenszyklus-Hooks.

Capacitor Layout-Modell

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

als visualViewport als preventScroll so bleiben Eingabefelder über dem Software-Tastaturfeld sichtbar.

Es läuft im Weblayer. Es rendernt keine native UIKit- oder Android-Bottom-Sheets, so dass Ihr App vollständigen Styling-Kontrolle behält, während es den WebView-Beschränkungen, die in Capacitor relevant sind, Respekt angedeihen lässt.

Demos und Playgrounds

Für jede unterstützte Verwendungsfälle liefern animierte WebP-Demos im Repository-README. Die Beispiele sind auch als StackBlitz-Entwicklungsumgebungen verfügbar:

Langer Blatt	Detents

Seitenleiste	Lightbox

Weitermachen von @capgo/capacitor-Blätter

Wenn Sie @capgo/capacitor-Blätter zum Planen von native Plugin-Arbeiten verwenden, verbinden Sie es mit Capgo Plugin-Verzeichnis für das 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 Alternativen zu Ionic Enterprise Plugins für den Produktworkflow in Alternativen zu Ionic Enterprise Plugins, und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.