Framework-agnostisch
Verwenden Sie benutzerdefinierte Elemente direkt auf Basis von Standards oder verwenden Sie Setup-Hilfen für React, Vue, Angular, Svelte und Solid.
Capacitor-fertig
Respektieren Sie sichere Bereiche, Tastaturbewegungen, native Edge-Gesten und WebView-Theme-Farben-Dimmung aus der Web-Schicht.
Jede Form der Blatt
Komponieren Sie untere Blätter, Seitenfenster, oberste Blätter, zentrierte Dialoge, Toasts, abgetrennte Blätter, Karten, Seiten und Lichtboxen.
Moderne CSS
Autoren halten sich fest mit em, rem, viewport-Einheiten calc(), und CSS-Variablen, während die Standardgröße bleibt em basierend auf.
Wann Sie es verwenden sollten
Abschnitt mit dem Titel “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- Laufzeitumgebung.
Verwenden Sie es, wenn Sie benötigen:
- Unterscheide sich mit einem oder mehreren Haltungen
- Linker oder rechter Seitenleisten und oberen Blätter
- Zentrierte Dialoge, Lichtboxen, Karten und Toast-ähnliche Überlagerungen
- Persistente Blätter, die die App hinter ihnen interaktiv halten
- Vollbild-Überlays, die von einer Ecke einsteigen
- Stack, Tiefe und Parallax-Effekte, die durch die Fortschrittsanzeige gesteuert werden
- Scroll-Hilfen, die den Fortschritt und die Entfernungswerte freigeben
- Capacitor-sichere Layout für Notcher, Home-Indikatoren, Android-Ausschnitte und Software-Tastaturen
Anwendungsbereichs-Abdeckung
Abschnitt mit dem Titel “Anwendungsbereichs-Abdeckung”| Anwendungsbereich | 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" |
| Unterschrift | Standard content-placement="bottom" |
| Blatt mit Tastatur | native-focus-scroll-prevention und visuelle Ansichtsverschiebungshandhabung |
| Toast | inert-outside="false", focus-trap="false", und keine Außenklick-Abbruch |
| Losgelöste Tabelle | cap-sheet-special-wrapper zusätzlich mit benutzerdefinierten Rand und Radius |
| Seite von unten | vollständige Höhe-Bottom-Tabelle-Inhalt |
| Oberer Tabelle | content-placement="top" |
| Tabelle mit Stapelung | cap-sheet-stack mit Tiefenvariablen |
| Tabelle 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 |
| Hintergrundbild | content-placement="center" mit Hintergrund und Medieninhalt |
| Persistenter Blatt mit Detent | default-presented, swipe-dismissal="false", und inert-outside="false" |
| Karte | Kompakter, zentrierter Blattinhalt |
<cap-sheet>besitzt 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 sicherheitsreiche Bereich und Tastatur-Abstände fest.<cap-sheet-backdrop>zeigt einen progress-synchronisierten Hintergrund an.<cap-sheet-content>zeigt die Blattfläche an.<cap-sheet-handle>bietet Drag und Tastatur-Abstandssteuerungen an.<cap-sheet-stack>koordiniert gestapelte Blätter.<cap-sheet-outlet>macht Blattfortschritt auf Seite, Tiefe und Parallax-Effekte zugänglich.<cap-scroll>und<cap-scroll-content>macht Fortschritt und Entfernung bei Scrollen zugänglich.setupSheet(element, options?)konfiguriert ein Blatt aus Framework-Effekten oder Lebenszyklus-Schleifen.
Modell des Layouts Capacitor
Abschnitt mit dem Titel “Capacitor Layout-Modell”Die Standardansicht des Blatts liest __CAPGO_KEEP_0__ env(safe-area-inset-*) und Capacitor-Art --safe-area-inset-* Fallback-Variablen werden dann auf die ausgewählten Kanten als Puffer um das Overlay 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 Tastaturbehandlung ist standardmäßig aktiviert. Das Blatt hört auf visualViewport Größenanpassungen und Scrollereignisse zu, fügt einem Tastatur-Offset zum Viewport hinzu und fokussiert Steuerungen mit preventScroll damit Eingabefelder über dem Software-Tastatur sichtbar bleiben.
Das Paket läuft im Weblayer. Es rendernt keine nativen UIKit- oder Android-Bottom-Sheets, so dass Ihr App die volle Stil-Kontrolle behält, während es den WebView-Einschränkungen Rechnung trägt, die in Capacitor relevant sind.
Demos und Entwicklungs-Playgrounds
Abschnitt mit dem Titel „Demos und Entwicklungs-Playgrounds“Für jede unterstützte Verwendungssituation liegen animierte WebP-Demos im Repository-README vor. Die Beispiele sind auch als StackBlitz-Playgrounds verfügbar:
| Langes Blatt | Detents |
|---|---|
 |  |
| 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/capacitor-Blätter 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 von Capgo, Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins, Ionic Enterprise Plugin Alternativen für das Produktworkflow in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds für das Produktworkflow in Capgo Native Builds.