Contao · MIT-Lizenz

Dialog und Sheet für Contao.

Dialoge, Bottom-Sheets und Offcanvas-Navigation auf dem nativen dialog-Element, mit Wischen und Einrastpunkten.

InstallierenGitHub

Version 0.1.0 vom 01.10.2026 · Contao 5.7 und 6.0 · PHP 8.3+ (Contao 5.7), 8.4+ (Contao 6)

Gibt es auch als npm-Paket: @nordwerk/scroll-sheet.

Installation

Im Contao Manager nach nordwerk/contao-sheet-bundle suchen und das Paket installieren. Alternativ das Manager-ZIP aus den GitHub-Releases herunterladen und im Manager hochladen; anschließend die Datenbank aktualisieren.

Über Composer:

composer require nordwerk/contao-sheet-bundle
vendor/bin/contao-console contao:migrate

Installationshinweise und Voraussetzungen stehen auch im README.

Was es kann

Das Inhaltselement „Dialog / Sheet“ nimmt beliebige Contao-Inhalte auf. Ein Dialog-Button öffnet oder schließt das Ziel; Bottom-Sheets bekommen auf Wunsch Einrastpunkte. Für eine Offcanvas-Navigation wird ein vorhandenes Contao-Navigationsmodul eingebunden.

Öffnen, Schließen und Escape funktionieren ohne JavaScript in Browsern mit Invoker Commands (Chromium 135+, Firefox 144+, Safari 26.2+); ältere Browser erhalten einen JavaScript-Fallback. Wischen, Fokus-Rückgabe und die Zurück-Taste ergänzen den Ablauf. Ein Dialog, der sich nicht wegwischen lässt, braucht immer einen erreichbaren Abschluss-Button.

Erste Schritte im Backend

Lege in einem Artikel „Dialog / Sheet“ an, wähle Dialogtitel, Darstellung und Optionen und füge über das Kind-Element-Symbol deine Inhalte ein. Lege auf derselben Seite einen „Dialog-Button“ an, wähle das Ziel-Sheet und die Aktion „Öffnen“; ein Button mit „Schließen“ dient als Abschluss im Sheet.

Einrastpunkte wie 50,75 sind Prozentwerte der Viewport-Höhe zwischen 5 und 95 und gelten für Bottom-Sheets. Wenn „Schließen erlauben“ aus ist, brauchst du einen erreichbaren Abschluss-Button.

Für Offcanvas lege zuerst ein Kern-Navigationsmodul an. Erstelle danach „Offcanvas-Navigation“, wähle das Navigationsmodul und die Darstellung und binde es im Layout oder als Inhaltselement ein.

Twig-Integration

component/_nw_sheet.html.twig kann als Include oder Embed auch außerhalb eines Inhaltselements eingesetzt werden; CSS und Module laden einmal. Für eigenes Markup gibt es nw_sheet_assets(), Farben und Darstellung werden über die Custom Properties von scroll-sheet angepasst.

Entwickelt im Contao-UI-Monorepo, als eigenes Composer-Paket veröffentlicht.

  • Verfügbar

    Galerie

    Raster, Leiste und Lightbox aus Carousel und Sheet, mit den Bildgrößen aus Contao.

    Zum Paket

Häufige Fragen

Welche Contao-Versionen unterstützt das Sheet?

Contao 5.7 mit PHP ab 8.3 und Contao 6 mit PHP ab 8.4. Die Dateien von scroll-sheet sind mitgeliefert; ein eigener JavaScript-Build ist nicht nötig.

Kann ich Dialoge ohne JavaScript öffnen?

Ja, in Browsern mit Invoker Commands: Chromium ab 135, Firefox ab 144 und Safari ab 26.2. Dort funktionieren Öffnen, Schließtaste und Escape nativ. Ältere Browser benötigen den JavaScript-Fallback; Einrastpunkte, Hintergrund-Tipp, History und Fokuskorrekturen sind zusätzliche Verbesserungen.

Wie baue ich eine Offcanvas-Navigation?

Lege zuerst ein Contao-Navigationsmodul an. Wähle es dann im Modul Offcanvas-Navigation aus und binde dieses im Layout oder als Inhaltselement ein. Der Burger öffnet die Seitenleiste; mit dem History-Plugin schließt auch die Zurück-Taste.

Wie passe ich Dialoge an mein Theme an?

Farben und Darstellung kommen aus den Custom Properties von scroll-sheet. Die Twig-Bausteine für Sheet, Dialog-Button und Offcanvas-Navigation lassen sich überschreiben; für eigenes Markup gibt es nw_sheet_assets().

Was ist bei nicht wegklickbaren Dialogen zu beachten?

Wenn Schließen erlauben aus ist, bleiben Escape, Hintergrund und Wegwischen ohne Wirkung. Füge deshalb immer einen erreichbaren Abschluss-Button hinzu. Vergib einen verständlichen Dialogtitel und prüfe Tastaturbedienung sowie Fokus-Rückgabe im Theme.

Unter welcher Lizenz steht das Paket?

Bundle und mitgelieferte OSS-Komponente stehen unter der MIT-Lizenz. Kommerzielle Nutzung und Anpassung sind erlaubt; Lizenz- und Copyright-Hinweise müssen bei Weitergabe erhalten bleiben.