Framework-agnostisch
Verwende standardsbasierte benutzerdefinierte Elemente direkt oder verwende Setup-Helfer für React, Vue, Angular, Svelte und Solid.
Capacitor-bereit
Respektiere sichere Bereiche, Tastaturbewegungen, native Edge-Gesten und WebView-Theme-Farben-Dimmung vom Weblayer.
Jeder Blattform
Mische untere Blätter, Seiten-Schubladen, obere Blätter, zentrierte Dialoge, Toasts, abgetrennte Blätter, Karten, Seiten und Lichtboxen.
Moderne CSS
Author detents 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.
Verwenden Sie es, wenn Sie benötigen:
- Unterscheide sich mit einem oder mehreren Detents
- Linker oder rechter Seitenleisten und oberen Sheets
- Zentrierte Dialoge, Lichtboxen, Karten und Toast-artige Überlagerungen
- Persistente Sheets, die die dahinterliegende App interaktiv halten
- Vollbild-Überlays, die von einer Ecke eintraten
- Stack, Tiefe und Parallax-Effekte, die durch die Fortschrittsanzeige gesteuert werden
- Skroll-Hilfen, die den Fortschritt und die Entfernungswerte freigeben
- Capacitor-sichere Layout für Notcher, Heimanzeigen, Android-Schnitte und Software-Tastaturen
Usecase-Abdeckung
Abschnitt mit dem Titel “Usecase-Abdeckung”| Usecase | Capgo Blättermuster |
|---|---|
| Langes Blatt | cap-sheet mit natürlicher Inhaltsrolle oder cap-scroll |
| Blatt mit Detent | detents="18em 32em" plus stepTo() oder ein Schritt Trigger |
| Seitenleiste | content-placement="left" oder content-placement="right" |
| Unterschrift | Blatt mit Tastatur content-placement="bottom" |
| und visueller Ansichtsverschiebung | native-focus-scroll-prevention Toast |
| , und keine Außenklick-Abbruch | inert-outside="false", focus-trap="false"und keine Außenklick-Abbruch |
| Losgelöste Tabelle | cap-sheet-special-wrapper mit zusätzlichen 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 Transformationen |
| 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 |
Kern API
Abschnitt mit Titel „Kern API“<cap-sheet>verwaltet Anzeigebereich, Detente, 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>renderet einen progress-synchronisierten Hintergrund.<cap-sheet-content>renderet die Blattfläche.<cap-sheet-handle>bietet Drag und Tastatur-Abstandssteuerungen an.<cap-sheet-stack>koordiniert gestapelte Blätter.<cap-sheet-outlet>offenbart Blattfortschritt zu Seite, Tiefe und Parallax-Effekten.<cap-scroll>und<cap-scroll-content>offenbart Fortschritt und Entfernung bei Scrollen.setupSheet(element, options?)konfiguriert ein Blatt aus Framework-Effekten oder Lebenszyklus-Schleifen.
Capacitor Layout-Modell
Abschnitt mit dem Titel “Capacitor Layout-Modell”Der Standard-Blattansichts-Bereich liest env(safe-area-inset-*) und Capacitor-Stil --safe-area-inset-* Fallschlusssätze, dann werden die ausgewählten Kanten als Abstand um das Overlay herum angewendet. safe-area="auto" schützt alle Kanten; verwenden 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ößenanpassung und Skrollerevents, fügt einem Tastaturabstand zum Viewport hinzu und fokussiert Steuerungselemente mit preventScroll so bleiben Eingabefelder sichtbar über dem Software-Tastatur.
Das Paket läuft im Weblayer. Es renderet keine nativen UIKit- oder Android-Bottom-Sheets, so dass Ihr App die volle Stilsteuerung behält, während sie den WebView-Beschränkungen, die in Capacitor relevant sind, Respekt zeigt.
Demos und Playgrounds
Abschnitt mit dem Titel „Demos und Playgrounds“Für jeden unterstützten Use-Case liefern animierte WebP-Demos im Repository-README. Die Beispiele sind auch als StackBlitz-Playgrounds verfügbar:
| Langscheibe | Dämpfer |
|---|---|
 |  |
| Seitenleiste | Lightbox |
|---|---|
 |  |
- Vollständiges Demo-Grid
- Reaktor-Spielplatz
- Vue-Spielplatz
- Angular-Spielplatz
- Svelte Playground
- Solid Playground
Fortsetzen Sie von @capgo/capacitor-Blätter
Sektion mit dem Titel “Fortsetzen Sie von @capgo/capacitor-Blätter”Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Blätter @capgo/capacitor-sheets __CAPGO_KEEP_0__ Plugin-Verzeichnis zum Produktworkflow in Capgo Plugin-Verzeichnis, Capgo Plugins von __CAPGO_KEEP_1__ zum Implementierungsdetail in Capacitor Plugins von Capgo, for the implementation detail in Capacitor Plugins by Capgo, If you are using __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-sheets to plan native plugin work, connect it with __CAPGO_KEEP_0__ Plugin Directory for the product workflow in __CAPGO_KEEP_0__ Plugin Directory, __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__ for the implementation detail in __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__, Adding or Updating Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins Alternativen zu Ionic Enterprise Plugin für den Produktworkflow in Alternativen zu Ionic Enterprise Plugin Capgo Native Builds für den Produktworkflow in Capgo Native Builds