@capgo/capacitor-Blätter

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

Loslegen GitHub

Framework-agnostisch

Verwenden Sie standardsbasierte benutzerdefinierte 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-Dimmung vom Weblayer.

Jede Blattform

Bildschirme unten, Seitenfenster, Oberflächen oben, zentrierte Dialoge, Toasts, abgetrennte Blätter, Karten, Seiten und Lichtboxen.

Moderne CSS

Mit Autorisierung von em, rem, Einheiten des Ansichtenbereichs calc(), und CSS-Variablen, während die Standardgröße bleibt em basierend.

Wenn Sie es verwenden sollten

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

Verwenden Sie es, wenn Sie benötigen:

Bildschirme unten mit einem oder mehreren Autorisierungen
Linkseiten- oder rechte Seitenleisten und Oberflächen oben
zentrierte Dialoge, Lightboxes, Karten und Toast-artige Überlagerungen
persistente Blätter, die das App dahinter interaktiv halten
vollbildige Überlagerungen, die von einer Ecke eintreten
Stack, Tiefe und Parallax-Effekte, die durch Fortschritt der Blätter angetrieben werden
Hilfsmittel zum Scrollen, die Fortschritt und Entfernungswerte offenlegen
Capacitor-sichere Layout für Notch, Home-Indikatoren, Android-Ausschnitte und Software-Tastaturen

Anwendungsbereichsabdeckung

Anwendungsbereich	Capgo Blättermustermuster
Langes Blatt	`cap-sheet` mit natürlicher Inhaltsscrollung oder `cap-scroll`
Blatt mit Detent	`detents="18em 32em"` zusätzlich `stepTo()` oder ein Schrittrichter
Seitenleiste	`content-placement="left"` oder `content-placement="right"`
Unterblatt	Standard `content-placement="bottom"`
Blatt mit Tastatur	`native-focus-scroll-prevention` und visueller Ansichtsverschiebungshandhabung
Toast	`inert-outside="false"`, `focus-trap="false"`, und keine Außenklick-Beendigung
Abgetrennte Blatt	`cap-sheet-special-wrapper` plus benutzerdefinierte Ränder und Radien
Seite von unten	Vollhöhe-Bottom-Sheet-Inhalt
Oberes Blatt	`content-placement="top"`
Blatt mit Stapelung	`cap-sheet-stack` mit Tiefenvariablen
Blatt mit Tiefe	`cap-sheet-outlet` und progress-getriebenen Transformationen
Parallax-Seite	`cap-sheet-outlet` mit `cap-scroll` Fortschritt
Seite	Vollbildinhalt, der von einer Ecke eintritt
Lightbox mit Hintergrund und Medieninhalt	`content-placement="center"` Persistenter Blatt mit Detent
und	`default-presented`, `swipe-dismissal="false"`Karte `inert-outside="false"`
Kompakter, zentrierter Blattinhalt	Kern __CAPGO_KEEP_0__

Abschnitt mit dem Titel „Kern API“

<cap-sheet> verwaltet Anzeigedaten, Dämpfer, Platzierung, Gesten, Barrierefreiheit und Ereignisse.
<cap-sheet-trigger> erklärt die Aktionen präsentieren, abblenden, toggle und detent-Schritt.
<cap-sheet-view> positioniert das Overlay und setzt sichere Bereich und Tastatur-Abstände.
<cap-sheet-backdrop> rendernt einen progress-synchronisierten Hintergrund.
<cap-sheet-content> rendernt die Blattfläche.
<cap-sheet-handle> bietet Drag- und Tastatur-Dämpfersteuerungen.
<cap-sheet-stack> koordiniert gestapelte Blätter.
<cap-sheet-outlet> erläutert die Blattfortschritt auf Seite, Tiefe und Parallax-Effekte.
<cap-scroll> und <cap-scroll-content> erläutert die Fortschritt und Entfernung der Scroll-Hilfen.
setupSheet(element, options?) konfiguriert ein Blatt aus Framework-Effekten oder Lebenszyklus-Schleifen.

Capacitor Layout-Modell

Der Standard-Blattsichtbereich liest env(safe-area-inset-*) und Capacitor-Stil --safe-area-inset-* Stornierungsvariablen, dann wendet er die ausgewählten Kanten als Abstand um den Overlay an. safe-area="auto" schützt alle Kanten; verwenden safe-area="bottom left right" oder safe-area="none" wenn ein Use-Case eine andere Verhaltensweise benötigt.

Die Tastatureingabe ist standardmäßig aktiviert. Das Blatt hört auf visualViewport Größen- und Scrollerevents, fügt einem Tastaturabstand zum Sichtbereich hinzu und fokussiert Steuerungselemente mit preventScroll so bleiben Eingabefelder über dem Software-Tastatur sichtbar.

Das Paket läuft im Weblayer. Es rendernt keine native UIKit- oder Android-Bottom-Sheets, so dass Ihre App den volle Stilkontrolle behält, während sie noch die WebView-Einschränkungen respektiert, die in Capacitor relevant sind.

Demos und Playgrounds

Animierte WebP-Demos für jeden unterstützten Use Case liegen im Repository-README vor. Die Beispiele sind auch als StackBlitz-Playgrounds verfügbar:

Langer Blatt	Detents

Seitenleiste	Lightbox

Weitermachen von @capgo/capacitor-Blätter

Wenn Sie native Plugin-Arbeit mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Blätter durchführen, verbinden Sie es mit @capgo/capacitor-Blätter um das Produktworkflow in @__CAPGO_KEEP_0__ Plugin-Verzeichnis zu verbinden Weitermachen von @Capgo in @Capgo Plugin-Verzeichnis Weitermachen von @Capgo von @__CAPGO_KEEP_1__ Weitermachen von @Capacitor/Capgo-Blätter für die Implementierungsdetails in Capacitor Plugins durch Capgo Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins 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.