framework-agnostisch
Verwenden Sie benutzerdefinierte Elemente direkt auf der Grundlage von Standards oder verwenden Sie Setup-Helfer für React, Vue, Angular, Svelte und Solid.
Capacitor ist bereit
Respektieren Sie die sicheren Bereiche, die Tastaturbewegungen, die nativen Edge-Gesten und die WebView-Theme-Farben-Dämpfung vom Web-Schicht.
Jeder Blattformat
Komponenten für untere Blätter, Seitenfenster, 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 bleibt em Basierend.
Wann es verwenden
Abschnitt mit dem Titel “Wann es verwenden”@capgo/capacitor-sheets ist für Capacitor-Apps geeignet, 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 Seitenleisten und oberste Blätter
- zentrierte Dialoge, Lightboxe, Karten und Toast-ähnliche Überlagerungen
- persistente Blätter, die die App hinter ihnen interaktiv halten
- vollbildige Überlagerungen, die von einer Kante eintraten
- Stack-, Tiefe- und Parallax-Effekte, die durch Fortschritt des Blatts angetrieben werden
- Hilfe zum Scrollen, die Fortschritt und Entfernungswerte offenlegt
- Capacitor-sichere Layout für Notch, Home-Indikatoren, Android-Ausschnitte und Software-Tastaturen
Anwendungsbereichsabdeckung
Abschnitt mit dem Titel “Anwendungsbereichsabdeckung”| Anwendungsbereich | Capgo Sheets pattern |
|---|---|
| Lang Blatt | cap-sheet mit natürlicher Inhaltsrolle oder cap-scroll |
| Blatt mit Detent | detents="18em 32em" plus stepTo() oder ein Schritttrigger |
| 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 | vollhochformatige 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 Fortschrittsgetriebene 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 |
| Persistenter Blatt mit Detent | default-presented, swipe-dismissal="false", und inert-outside="false" |
| Karte | kompakter zentrierter Blattinhalt |
Kern API
Abschnitt mit Titel „Kern API“<cap-sheet>besitzt Präsentationszustand, Haltepunkte, Platzierung, Gesten, Barrierefreiheit und Ereignisse.<cap-sheet-trigger>erklärt die Aktionen 'anwesend', 'abbrechen', 'umstellen' und 'Haltepunkt-Schritt'.<cap-sheet-view>positioniert das Overlay und setzt sichere Bereiche und Tastatur-Abstände.<cap-sheet-backdrop>rendernt einen progress-synchronisierten Hintergrund.<cap-sheet-content>rendernt die Oberfläche des Blatts.<cap-sheet-handle>bietet Drag- und Tastatur-Haltepunktsteuerungen an.<cap-sheet-stack>koordiniert gestapelte Blätter.<cap-sheet-outlet>offenbart den Fortschritt des Blatts an die Seite, Tiefe und Parallax-Effekte.<cap-scroll>und<cap-scroll-content>offenbart Fortschritts- und Abstands-Hilfen für die Scroll-Funktion.setupSheet(element, options?)konfiguriert ein Blatt aus Framework-Effekten oder Lifecycle-Schleifen.
Capacitor Layout-Modell
Capacitor Layout ModellDie 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" oder
als visualViewport als preventScroll als
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.
Für jeden unterstützten Anwendungsbereich liefern die Repository-READMEs animierte WebP-Demos. Die Beispiele sind auch als StackBlitz-Spielplätze verfügbar:
| Langer Blatt | Enten |
|---|---|
 |  |
| Seitenleiste | Lightbox |
|---|---|
 |  |
- Vollständiges Demo-Grid
- Reaktions-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 “@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Blätter” zum Planen von native Plugin-Arbeiten verwenden, verbinden Sie es mit @capgo/capacitor-sheets für das Produktworkflow in @__CAPGO_KEEP_0__ Plugin-Verzeichnis @Capgo Plugins von @__CAPGO_KEEP_1__ @Capgo/__CAPGO_KEEP_1__-Blätter @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 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.