Framework-unabhängig
Verwende standardsbasierte benutzerdefinierte Elemente direkt oder verwende Setup-Helfer für React, Vue, Angular, Svelte und Solid.
Capacitor bereit
Respektieren Sie die sicheren Bereiche, die Tastaturbewegungen, die nativen Edge-Gesten und die WebView-Theme-Farben-Dämpfung aus der Web-Schicht.
Jeder Blattformat
Erstellen Sie unteren Blätter, Seitenfenster, oberste Blätter, zentrierte Dialoge, Toasts, abgetrennte Blätter, Karten, Seiten und Lichtboxen.
Moderne CSS
Autoren entwirfen mit em, rem, Einheiten des Ansichtenbereichs, calc(), und CSS-Variablen, während die Standardgröße bleibt em basierend.
Wenn Sie es verwenden sollen
Abschnitt mit dem Titel „Wenn Sie es verwenden sollen“@capgo/capacitor-sheets ist für Capacitor-Apps, 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- Laufzeitumgebung.
Benutzen Sie es, wenn Sie benötigen:
- Unterblätter mit einem oder mehreren Dämpfern
- Linkseiten- oder Rechtsleisten und Oberblätter
- Zentrierte Dialoge, Lichtboxen, Karten und Toast-artige Überlagerungen
- Persistente Blätter, die die App hinter ihnen interaktiv halten
- Vollbild-Überlagerungen, die von einer Ecke eintreten
- Stack-, Tiefe- und Parallax-Effekte, die durch Fortschritt des Blattes angetrieben werden
- Fortgeschrittene Scroll-Hilfen, die Fortschritt und Entfernungswerte offenlegen
- Capacitor-sichere Layout für Notch, Home-Indikatoren, Android-Ausstülpungen und Software-Tastaturen
Fallzusammenhänge Abdeckung
Sektion mit dem Titel “Fallzusammenhänge Abdeckung”| Fallzusammenhänge | Capgo Blättermustern |
|---|---|
| Langes 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 Handhabung der Verschiebung des visuellen Ansichtsbereichs |
| Toast | inert-outside="false", focus-trap="false", und keine Außenklick-Beendigung |
| Abgetrenntes Blatt | cap-sheet-special-wrapper zusätzliche Anpassung von Rand und Abstand |
| Seite von unten | vollständige Höhe des Blatts am unteren Ende |
| Oberes Blatt | content-placement="top" |
| Blatt mit Stapel | cap-sheet-stack mit Variablen für Tiefe |
| Blatt mit Tiefe | cap-sheet-outlet und 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 |
| Persistente Blatt mit Detent | default-presented, swipe-dismissal="false", und inert-outside="false" |
| Karte | kompakter zentrierter Blattinhalt |
Core API
Abschnitt mit Titel „Core API“<cap-sheet>besitzt den Präsentationszustand, -detents, -Anordnung, -Gesten, -Barrierefreiheit und -Ereignisse.<cap-sheet-trigger>erklärt die Aktionen „präsentieren“, „abbrechen“, „umschalten“ und „detent-Schritt“.<cap-sheet-view>positioniert das Overlay und setzt sichere Bereich- und Tastaturabstände.<cap-sheet-backdrop>renderet einen progress-synchronisierten Hintergrund.<cap-sheet-content>renderet die Blattoberfläche.<cap-sheet-handle>bietet Drag- und Tastatur-Steuerung für Detents.<cap-sheet-stack>koordiniert gestapelte Blätter.<cap-sheet-outlet>erläutert den Fortschritt des Blatts an der Seite, Tiefe und Parallax-Effekte.<cap-scroll>und<cap-scroll-content>scroll Fortschritt und Entfernung hilfreiche Funktionen bereitstellt.setupSheet(element, options?)eine Schaltfläche von Framework-Effekten oder Lebenszyklus- Hooks konfiguriert.
Capacitor Layout-Modell
Sektion mit dem Titel “Capacitor Layout-Modell”Der Standard-Sichtbereich der Schaltfläche liest env(safe-area-inset-*) und Capacitor-Stil --safe-area-inset-* Fallback-Variablen, dann werden die ausgewählten Kanten als Abstand um die Überlagerung herum angewendet. safe-area="auto" alle Kanten schützt; 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. Die Schaltfläche hört auf visualViewport Größen- und Scrollereignisse, fügt einem Tastatur-Offset zum Sichtbereich hinzu und fokussiert Steuerungselemente mit preventScroll so bleiben die Eingaben sichtbar über dem Software-Tastatur.
Die Pakete laufen im Weblayer. Sie rendern keine native UIKit oder Android-Bottom-Sheets, so dass Ihre App den vollen Stilkontrolle behält, während sie den WebView-Beschränkungen Respekt zeigt, die in Capacitor relevant sind.
Demos und Playgrounds
Abschnitt mit dem Titel “Demos und Playgrounds”Animierte WebP-Demos für jeden unterstützten Einsatzfall liegen im Repository-README vor. Die Beispiele sind auch als StackBlitz-Playgrounds verfügbar:
| Lange Blatt | Detents |
|---|---|
 |  |
| Seitenleiste | Lightbox |
|---|---|
 |  |
- Vollständiges Demo-Grid
- React-Spielplatz
- Vue-Spielplatz
- Angular-Spielplatz
- Svelte-Spielplatz
- Solid-Spielplatz
Fortsetzen Sie von @capgo/capacitor-Blättern
Abschnitt mit dem Titel “Fortsetzen Sie von @capgo/capacitor-Blättern”Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Blätter @capgo/capacitor-sheets zur Planung von native Plugins verwenden, verbinden Sie es mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Blättern Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren, 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.