frameworkunabhängig
Verwenden Sie benutzerdefinierte Elemente basierend auf Standards oder nutzen Sie Setup-Hilfen für React, Vue, Angular, Svelte und Solid.
Capacitor-fertig
Respektieren Sie die sicheren Bereiche, die Tastaturbewegungen, die nativen Edge-Gesten und die WebView-Theme-Farbverdimmung vom Weblayer.
Jede Form der Blattform
Komponieren Sie unteren Blätter, Seitenfenster, oberste Blätter, zentrierte Dialoge, Toasts, abgetrennte Blätter, Karten, Seiten und Lichtboxen.
Moderne CSS
Autoren Sie Detents mit em, rem, viewport-Einheiten calc(), und CSS-Variablen, während die Standardgröße bleibt em basierend auf.
Wann es verwenden
Abschnitt mit dem Titel „Wann es verwenden“@capgo/capacitor-sheets dieses Plugin ist für Capacitor-Anwendungen gedacht, die hochwertige mobile Überlagerungen benötigen, ohne eine bestimmte UI-Bibliothek 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:
- Unterschlag mit einem oder mehreren Detents
- Linke oder rechte Seitenleisten und Oberflächen
- Zentrierte Dialoge, Lichtboxen, Karten und Toast-artige Überlagerungen
- Persistente Oberflächen, die die dahinterliegende App interaktiv lassen
- Vollbild-Überlagerungen, die von einer Ecke eintraten
- stack, depth, and parallax effects driven by sheet progress
- Scroll-Hilfen, die Fortschritt und Entfernungswerte freigeben
- Capacitor-sichere Anordnung für Notch, Heimindikatoren, Android-Ausschnitte und Software-Tastaturen
Anwendungsbereichsabdeckung
Section titled “Usecase Coverage”| Usecase | Capgo Blattschablonenmuster |
|---|---|
| Langes Blatt | cap-sheet mit natürlicher Inhaltsrollen oder cap-scroll |
| Blatt mit Detent | detents="18em 32em" plus stepTo() oder ein Trigger-Schritt |
| Seitenleiste | content-placement="left" oder content-placement="right" |
| Alternativen | Unterseite content-placement="bottom" |
| Blatt mit Tastatur | native-focus-scroll-prevention und Handhabung der visuellen Ansichtsverschiebung |
| Toast | inert-outside="false", focus-trap="false", und keine Außerhalb-Klick-Abbruch |
| , und keine Außenklick-Abmeldung | cap-sheet-special-wrapper plus individuelle Ränder und Radien |
| zusätzlich mit benutzerdefinierten Rand und Radius | vollhöheige untere Blattinhalt |
| 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 | mit vollbildinhaltigem Inhalt, der von einer Kante eintritt |
| Lightbox | content-placement="center" mit Hintergrund und Medieninhalten |
| Persistenter Blatt mit Detent | default-presented, swipe-dismissal="false", und inert-outside="false" |
| Karte | kompakter zentrierter Blattinhalt |
Kern API
Section titled “Core API”<cap-sheet>erklärt die Präsentation, die Ablehnung, die Schaltfläche und die Detent-Schritt-aktionen.<cap-sheet-trigger>Positioniert das Overlay und setzt die sichere Bereichs- und Tastaturabstände.<cap-sheet-view>positionsiert die Überlagerung und setzt sichere Bereich und Tastaturabstände.<cap-sheet-backdrop>ein progress-synchronisiertes Hintergrundbild<cap-sheet-content>Rendert den Blattinhalt.<cap-sheet-handle>bietet Drag- und Tastatur-Entfernungskontrollen.<cap-sheet-stack>koordiniert gestapelte Blätter.<cap-sheet-outlet>offenbart Fortschritte von Blättern an der Seite, Tiefe und Parallax-Effekte.<cap-scroll>und<cap-scroll-content>scrollen Fortschritt und Entfernungshilfen offenbart.setupSheet(element, options?)konfiguriert ein Blatt aus Framework-Effekten oder Lebenszyklushooks.
Capacitor Layout-Modell
Abschnitt mit dem Titel „Capacitor Layout-Modell“Die Standardansicht des Blattes liest env(safe-area-inset-*) und Capacitor-stil --safe-area-inset-* Stornierungsvariablen, dann wendet die ausgewählten Kanten als Abstand um das Overlay an. safe-area="auto" schützt alle Kanten; verwenden Sie safe-area="bottom left right" oder safe-area="none" eine Verhaltensweise erfordert
Die Tastaturbehandlung ist standardmäßig aktiviert. Das Blatt hört auf visualViewport und scrollt Ereignisse, fügt einem Tastaturabstand zum Fenster und fokussiert Steuerungselemente mit preventScroll damit Eingabefelder über dem Software-Tastatur sichtbar bleiben.
Das Paket läuft im Weblayer. Es rendernt keine native UIKit oder Android-Bottom-Sheets, so dass Ihr App vollständigen Styling-Kontrolle behält, während es den WebView-Beschränkungen Respekt zeigt, die in Capacitor relevant sind.
Demos und Playgrounds
Sektion mit dem Titel “Demos und Playgrounds”Animierte WebP-Demos für jeden unterstützten Usecase liegen 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-sheets”Wenn Sie Capgo verwenden @capgo/capacitor-Blätter um es mit “__CAPGO_KEEP_0__ Plugin Directory” zu verbinden 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 Plugins hinzufügen oder aktualisieren Ionic Enterprise Plugin Alternativen für das Produktworkflow in Ionic Enterprise Plugin Alternativen, und Capgo nativee Native Builds für das Produktworkflow in Capgo Native Builds.