Overlay
Verbessern Sie Ihre UX mit mehrschichtigen Erlebnissen.
Mit der Overlay-Komponente können Sie dynamische, mehrschichtige UI-Elemente erstellen, die sich über Ihren Hauptinhalten befinden, z. B. Modals, Popups, Seitenmenüs und mehr. Egal, ob es sich um ein Newsletter-Formular, ein mobiles Menü, eine Produktvorschau oder eine bildschirmfüllende Ankündigung handelt, Overlays helfen dabei, fokussierte Inhalte zu liefern, ohne die aktuelle Seite des Nutzers zu unterbrechen.
Diese Komponente ist vollständig style-, und positionierbar, reaktionsfähig und kombiniert Flexibilität mit Benutzerfreundlichkeit, so dass Sie interaktive Elemente entwerfen können, die sich wirklich abheben.
Entwickelt für Interaktion
Mobile Menüs, Formulare und mehr.
Einfach über Button Komponente auslösbar.Sidebars, Warenkörbe oder mobile Menüs.
Fade oder Slide Effekte.Aufmerksamkeitsstarke Layouts.
Zentralisieren oder verankern Sie Overlays.
Flexible Anzeige und Steuerung
Präzise Positionierung.
Oben, unten, links, rechts oder in der Mitte.Optionale Scroll-Sperre.
Verhindert das Scrollen im Hintergrund.Theming & Übergänge.
Wenden Sie Fade oder Slide Effekte an.
Anwendungsfälle
Overlays sind für ein mehrschichtiges UI-Design und moderne Interaktivität unerlässlich. Sie ermöglichen es Ihnen, kontextbezogene Inhalte nach Bedarf anzuzeigen, sei es für die Interaktion mit dem Benutzer, für Marketingzwecke oder zur Unterstützung der Navigation.
Anwendungsfälle umfassen:
Modals für Login, Newsletter-Anmeldung oder Bestätigungen
Navigation Drawers für mobile Menüs oder Dashboards
Schnellansichten für Produktvorschauen oder erweiterte Bilder
Ankündigungen oder Warnungen, die den Fokus des Benutzers erfordern
Interaktive Widgets wie Kalender oder Terminplaner
Overlays mit Formularen, dynamischen Filtern oder Onboarding-Schritten
Jedes Overlay kann vollständig über Inhalte verwaltet werden, z. B. in Ihren Layouts, und erfordert keinen Code, bietet aber vollständige Flexibilität.
Konfigurationsoptionen und Funktionen
Die Overlay-Komponente bietet Ihnen unübertroffene Flexibilität bei der Gestaltung von Benutzeroberflächen mit mehreren Ebenen. Erstellen Sie friktionslose, zugängliche und gebrandete Overlays, die die Interaktion und den Fokus unterstützen, ohne dass die Entwicklung eingreifen muss.
Auslösbar, themebar, anpassbar. Alles, was Ihre mehrschichtige Benutzeroberfläche braucht, von Anfang an, ohne Code.
Id
Die ID dient als Auslöser-Identifikator. Schaltflächen oder Links, die auf diese ID verweisen, schalten die Sichtbarkeit des Overlays um.
Beispiel:
Eine Schaltfläche mit der Aktion auf die folgende ID { id: 'overlay-newsletter' } schaltet das Overlay mit id="overlay-newsletter" um.
So lässt sich genau steuern, wann Overlays erscheinen oder verschwinden.
Content Bereich
Dies ist ein verschachtelbarer Komponentenbereich zum Hinzufügen beliebiger Komponenten, wie Bilder, Überschriften, Formulare und Container. Er definiert, was innerhalb des Overlays gerendert wird.
Verwenden Sie ihn zum Erstellen:
Navigationsmenüs
Nachrichten
Bilder
Strukturierte Inhalte wie Listen oder Icons
Content Position
Legt fest, wo der Overlay-Inhalt auf dem Bildschirm erscheint:
Oben
Unten
Links
Rechts
Zentriert (Standard)
Wählen Sie je nach Zweck: z. B. mobile Navigation = links, Banner = oben
Scroll erlaubt
Ein Toggle, der festlegt, ob der eigentliche Content hinter dem aktiven Overlay scrollbar sein soll.
Aktiviert: Scrollen im Hintergrund bleibt möglich
Deaktiviert: Seite ist gesperrt, während das Overlay aktiv ist (am besten für Modals)
Toggle Effekt
Wählen Sie zwischen zwei integrierten Übergangsanimationen, die die visuelle Attraktivität und UX-Klarheit verbessern:
Fade: Sanfter Übergang mit Deckkraft
Slide: Richtungsabhängige Schiebeanimation basierend auf dem Eintritt/Austritt
Komponenten Theme
Wenden Sie ein Theme auf die äußere Hülle des Overlays an und steuern Sie Hintergrundfarbe, Auffüllung, z-Index usw.
Content Theme
Gestalten Sie den inneren Inhalt des Overlays separat, ideal für benutzerdefiniertes Styling je nach Anwendungsfall (z. B. ein dunkles Overlay mit einem hellen Formular).