frameworkunabhängig
Verwenden Sie benutzerdefinierte Elemente direkt auf der Grundlage von Standards oder verwenden Sie Setup-Helfer für React, Vue, Angular, Svelte und Solid.
Capacitor-fertig
Respektieren Sie die sicheren Bereiche, die Tastaturbewegungen, die nativen Randgesten und die Dimmung der WebView-Themefarbe aus der Web-Schicht.
Jeder Blattformat
Komponieren Sie unteren Blätter, Seitenfenster, oberste Blätter, zentrierte Dialoge, Toasts, abgetrennte Blätter, Karten, Seiten und Lichtboxen.
Moderne CSS
Autor hält sich mit em, rem, viewport-Einheiten calc(), und CSS-Variablen an die Standardgröße an em basierend.
Wenn Sie es verwenden sollten
Abschnitt mit dem Titel “Wenn 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, sodass das Kernpaket keine Abhängigkeit von React, Vue, Angular, Svelte oder Solid benötigt.
Verwenden Sie es, wenn Sie benötigen:
- Unterscheide sich mit einem oder mehreren Haltungen
- Link- oder rechte Seitenleisten und oberste Blätter
- Zentrierte Dialoge, Lichtboxen, Karten und Toast-ähnliche Überlagerungen
- Persistente Blätter, die die App hinter ihnen interaktiv halten
- Vollbild-Überlagerungen, die von einer Ecke eintraten
- Stack, Tiefe und Parallax-Effekte, die durch Fortschrittsbetrachtung angetrieben werden
- Skroll-Hilfen, die Fortschritt und Entfernungswerte offenlegen
- Capacitor-sichere Layout für Notch, Home-Indikatoren, Android-Ausschnitte und Software-Tastaturen
Usecase-Abdeckung
Abschnitt mit dem Titel “Usecase-Abdeckung”| Usecase | Capgo Blättermuster |
|---|---|
| Langes Blatt | cap-sheet mit natürlicher Inhalte scrollen oder cap-scroll |
| Blatt mit Detent | detents="18em 32em" plus stepTo() oder ein Schritt Trigger |
| Seitenleiste | content-placement="left" oder content-placement="right" |
| Unterseite | Standard content-placement="bottom" |
| Blatt mit Tastatur | native-focus-scroll-prevention und visuelle Ansichtsverschiebung |
| Toast | inert-outside="false", focus-trap="false", und keine Außenklick-Abbruch |
| Losgelöste Blatt | cap-sheet-special-wrapper __CAPGO_KEEP_0__ |
| Seite von unten | vollhöhenunterer Blattinhalt |
| Oberes Blatt | content-placement="top" |
| Blatt mit Stapelung | cap-sheet-stack mit Tiefenvariablen |
| Blatt mit Tiefe | cap-sheet-outlet und progress-getriebenen Transformen |
| Parallax-Seite | cap-sheet-outlet mit cap-scroll progress |
| 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 |
<cap-sheet>besitzt den Zustand der Präsentation, Detents, Platzierung, Gesten, Barrierefreiheit und Ereignisse.<cap-sheet-trigger>erklärt die Aktionen present, dismiss, toggle und detent-step.<cap-sheet-view>positioniert die Überlagerung und legt sicherheitsrelevante Bereiche und Tastatur-Einstellungen fest.<cap-sheet-backdrop>zeigt einen progress-synchronisierten Hintergrund an.<cap-sheet-content>zeigt die Blattfläche an.<cap-sheet-handle>bietet Einstellungen für das Ziehen und die Tastatur-Einstellungen.<cap-sheet-stack>koordiniert gestapelte Blätter.<cap-sheet-outlet>macht die Fortschritte des Blatts für die Seite, Tiefe und Parallax-Effekte zugänglich.<cap-scroll>und<cap-scroll-content>macht die Fortschritte der Scroll- und Entfernungshilfen zugänglich.setupSheet(element, options?)konfiguriert ein Blatt aus Framework-Effekten oder Lebenszyklus-Schleifen.
Capacitor Layout-Modell
Abschnitt mit dem Titel “Capacitor Layout-Modell”Die Standardansicht des Blatts liest env(safe-area-inset-*) und Capacitor-Stil --safe-area-inset-* Fallback-Variablen werden dann auf die ausgewählten Kanten als Puffer um die Überlagerung angewendet. safe-area="auto" schützt alle Kanten; verwenden Sie 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ößenanpassungen und Scrollereignisse, fügt einem Tastatur-Offset zum Fenster hinzu und fokussiert Steuerungselemente mit preventScroll so bleiben Eingabefelder sichtbar über der Software-Tastatur.
Das Paket läuft im Weblayer. Es renderet keine nativen UIKit- oder Android-Bottom-Sheets, so dass Ihr App vollständigen Styling-Kontrolle behält, während es den WebView-Einschränkungen Rechnung trägt, die in Capacitor relevant sind.
Demos und Playgrounds
Abschnitt mit dem Titel „Demos und Playgrounds“Für jeden unterstützten Use-Case liegen animierte WebP-Demos im Repository-README vor. Die Beispiele sind auch als StackBlitz-Playgrounds verfügbar:
| Langes Blatt | Dämpfer |
|---|---|
 |  |
| Seitenleiste | Lightbox |
|---|---|
 |  |
- Vollständiges Demo-Grid
- Reaktor-Spielplatz
- Vue-Spielplatz
- Angular-Spielplatz
- Svelte Spielplatz
- Solid Spielplatz
Weitermachen von @capgo/capacitor-Blätter
Abschnitt mit dem Titel “Weitermachen von @capgo/capacitor-Blätter”Wenn Sie native Plugin-Arbeit mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Blätter planen, verbinden Sie es mit @capgo/capacitor-Blätter um es mit dem Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins Alternativen zu Ionic Enterprise Plugin für das Produktworkflow in Alternativen zu Ionic Enterprise Plugin, und Capgo Native Builds für das Produktworkflow in Capgo Native Builds.