@capgo/capacitor-sheets

Framework-unabhängige Bottom Sheets, Drawers, Dialoge und Overlays, optimiert für Capacitor WebViews.

Framework-agnostisch

Nutze Standard-Custom-Elements direkt oder verwende Setup-Helper für React, Vue, Angular, Svelte und Solid.

Capacitor bereit

Berücksichtigt Safe Areas, Tastatur-Bewegungen, native Edge-Gestures und die WebView-Theme-Color-Dimmung aus dem Web-Layer.

Jede Sheet-Form

Erstelle Bottom Sheets, Side Drawers, Top Sheets, zentrierte Dialoge, Toasts, Detached Sheets, Cards, Pages und Lightboxes.

Modernes CSS

Definiere Detents mit em, rem, Viewport-Einheiten, calc(), und CSS-Variablen, während das Standard-Sizing em bleibt.

Plattform-Support

Plattform	Support	Hinweise
iOS	Web-Layer	Custom Elements in der WKWebView
Android	Web-Layer	Custom Elements in der Android WebView
Web	Ja	Gleiche Komponenten für Capacitor Web-Builds

Anwendungsfälle

@capgo/capacitor-sheets ist für Capacitor Apps gedacht, die hochwertige mobile Overlays benötigen, ohne ein spezielles UI-Framework zu nutzen. Da es als Custom Elements ausgeliefert wird, hat das Core-Paket keine Abhängigkeiten zu React, Vue, Angular, Svelte oder Solid Runtimes.

Nutze es, wenn du Folgendes benötigst:

Bottom Sheets mit einem oder mehreren Detents
Sidebars (links/rechts) und Top Sheets
Zentrierte Dialoge, Lightboxes, Cards und Toast-ähnliche Overlays
Persistente Sheets, die die App im Hintergrund interaktiv halten
Full-Page Overlays, die von einem Rand einfliegen
Stack-, Depth- und Parallax-Effekte basierend auf dem Sheet-Progress
Scroll-Helper, die Progress- und Distanzwerte liefern
Capacitor-sicheres Layout für Notches, Home Indicators, Android Cutouts und Software-Keyboards

Anwendungsfälle

Anwendungsfall	Capgo Sheets Pattern
Langes Sheet	`cap-sheet` mit natürlichem Content-Scroll oder `cap-scroll`
Sheet mit Detent	`detents="18em 32em"` plus `stepTo()` oder einem Step-Trigger
Sidebar	`content-placement="left"` oder `content-placement="right"`
Bottom Sheet	Standard `content-placement="bottom"`
Sheet mit Tastatur	`native-focus-scroll-prevention` und Visual Viewport Offset Handling
Toast	`inert-outside="false"`, `focus-trap="false"`, und kein Schließen durch Klick außerhalb
Getrennte Sheet	`cap-sheet-special-wrapper` plus benutzerdefinierte Margins und Radius
Seite von unten	Full-Height Bottom Sheet Content
Top Sheet	`content-placement="top"`
Sheet mit Stacking	`cap-sheet-stack` mit Tiefenvariablen
Sheet mit Tiefe	`cap-sheet-outlet` und Fortschritts-basierten Transforms
Parallax-Seite	`cap-sheet-outlet` mit `cap-scroll` Fortschritt
Seite	Full-Viewport-Content, der von einem Rand einfährt
Lightbox	`content-placement="center"` mit Backdrop und Medieninhalt
Persistentes Sheet mit Detent	`default-presented`, `swipe-dismissal="false"`, und `inert-outside="false"`
Card	kompakter, zentrierter Sheet-Inhalt

Kern von API

<cap-sheet> verwaltet Präsentationsstatus, Detents, Platzierung, Gesten, Barrierefreiheit und Events.
<cap-sheet-trigger> deklariert Aktionen für present, dismiss, toggle und Detent-Step.
<cap-sheet-view> positioniert das Overlay und wendet Safe-Area- sowie Keyboard-Offsets an.
<cap-sheet-backdrop> rendert einen fortschrittssynchronisierten Backdrop.
<cap-sheet-content> rendert die Sheet-Oberfläche.
<cap-sheet-handle> bietet Drag- und Tastatur-Steuerung für Detents.
<cap-sheet-stack> koordiniert gestapelte Sheets.
<cap-sheet-outlet> gibt den Sheet-Fortschritt für Page-, Depth- und Parallax-Effekte frei.
<cap-scroll> und <cap-scroll-content> bietet Helfer für Scroll-Fortschritt und Distanz an.
setupSheet(element, options?) konfiguriert ein Sheet über Framework-Effects oder Lifecycle-Hooks.

Capacitor Layout-Modell

Der Standard-Viewport des Sheets liest env(safe-area-inset-*) und Capacitor-Style --safe-area-inset-* Fallback-Variablen aus und wendet die gewählten Edges als Padding um das Overlay an. safe-area="auto" schützt alle Edges; nutze safe-area="bottom left right" oder safe-area="none" wenn ein Anwendungsfall ein anderes Verhalten erfordert.

Die Tastatursteuerung ist standardmäßig aktiviert. Das Sheet lauscht auf visualViewport beinhaltet Resize- und Scroll-Events, fügt einen Keyboard-Offset zum Viewport hinzu und fokussiert Steuerelemente mit preventScroll damit Inputs über der Software-Tastatur sichtbar bleiben.

Das Package läuft in der Web-Layer. Es rendert keine nativen UIKit- oder Android-Bottom-Sheets, sodass deine App die volle Styling-Kontrolle behält und dennoch die WebView-Constraints respektiert, die in Capacitor wichtig sind.

Demos und Playgrounds

Animierte WebP-Demos für jeden unterstützten Use-Case sind im Repository-README enthalten. Die Beispiele sind auch als StackBlitz-Playgrounds verfügbar:

Langes Sheet	Detents

Sidebar	Lightbox

Weiter mit @capgo/capacitor-sheets

Wenn Sie ... verwenden @capgo/capacitor-sheets um die Arbeit an Native Plugins zu planen, verbinde es mit Capgo Plugin-Verzeichnis für den Produkt-Workflow im 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 Adding or Updating Plugins, Ionic Enterprise Plugin-Alternativen für den Produkt-Workflow in Ionic Enterprise Plugin Alternatives und Capgo Native Builds für den Produkt-Workflow in Capgo Native Builds.