Zum Hauptinhalt springen

Drawer

In ChatGPT öffnen
Schatten dwc-drawer 24.00
Java API

Die Drawer-Komponente in webforJ erzeugt ein schiebendes Panel, das von der Kante des Bildschirms erscheint und zusätzlichen Inhalt anzeigt, ohne die aktuelle Ansicht zu verlassen. Sie wird häufig für Seitennavigation, Filtermenüs, Benutzereinstellungen oder kompakte Benachrichtigungen verwendet, die temporär angezeigt werden müssen, ohne die Hauptoberfläche zu stören.

Stacking​

Drawers stapeln sich automatisch, wenn mehrere geöffnet sind, wodurch sie eine flexible Wahl für platzbeschränkte Schnittstellen darstellen.

Im folgenden Beispiel wird dieses Verhalten innerhalb der AppLayout Komponente gezeigt. Der Navigations-Drawer, der durch das Hamburger-Menü ausgelöst wird, ist in AppLayout eingebaut, während das Willkommens-Popup am unteren Rand eine eigenständige Drawer-Instanz verwendet. Beide koexistieren und stapeln sich unabhängig, was zeigt, wie Drawers innerhalb von Layout-Komponenten integriert oder als eigenständige Elemente verwendet werden können.

Code anzeigen

Autofokus​

Die Drawer-Komponente unterstützt Autofokus, welcher automatisch den Fokus auf das erste fokussierbare Element setzt, wenn der Drawer geöffnet wird. Dies verbessert die Benutzerfreundlichkeit, indem es die Aufmerksamkeit direkt auf das erste handlungsfähige Element lenkt.

Code anzeigen

Label​

Die setLabel()-Methode kann eine bedeutungsvolle Beschreibung des Inhalts innerhalb eines Drawer bereitstellen. Wenn ein Label gesetzt ist, können assistive Technologien wie Screenreader dies ansagen, was den Benutzern hilft, den Zweck des Drawer zu verstehen, ohne dessen visuelle Inhalte zu sehen.

Drawer drawer = new Drawer();
drawer.setLabel("Aufgabenmanager");
Beschreibende Labels

Verwenden Sie prägnante und beschreibende Labels, die den Zweck des Drawer widerspiegeln. Vermeiden Sie allgemeine Begriffe wie „Menü“ oder „Panel“, wenn ein spezifischerer Name verwendet werden kann.

Größe​

Um die Größe eines Drawer zu steuern, setzen Sie einen Wert für die CSS-Custom-Property --dwc-drawer-size. Dies legt die Breite des Drawer für die Platzierung links/rechts oder die Höhe für die Platzierung oben/unten fest.

Sie können den Wert mit einer beliebigen gültigen CSS-Einheit wie Prozent, Pixel oder vw/vh definieren, sowohl in Java als auch in CSS:

// Java
drawer.setStyle("--dwc-drawer-size", "40%");
/* CSS */
dwc-drawer {
  --dwc-drawer-size: 40%;
}

Um zu verhindern, dass der Drawer zu groß wird, verwenden Sie --dwc-drawer-max-size zusammen mit ihm:

// Java
drawer.setStyle("--dwc-drawer-size", "40%");
drawer.setStyle("--dwc-drawer-max-size", "800px");
/* CSS */
dwc-drawer {
  --dwc-drawer-size: 40%;
  --dwc-drawer-max-size: 800px;
}

Platzierung​

Die setPlacement()-Methode steuert, wo der Drawer im Ansichtsfenster erscheint.

Verfügbare Platzierungsoptionen:

  • OBEN: Platziert den Drawer am oberen Rand des Ansichtsfensters.
  • OBEN_ZENTRAL: Richtet den Drawer horizontal zentriert am oberen Rand des Ansichtsfensters aus.
  • UNTEN: Platziert den Drawer am unteren Rand des Ansichtsfensters.
  • UNTEN_ZENTRAL: Zentriert den Drawer horizontal am unteren Rand des Ansichtsfensters.
  • LINKS: Platziert den Drawer entlang der linken Kante des Ansichtsfensters.
  • RECHTS: Platziert den Drawer entlang der rechten Kante des Ansichtsfensters.
Code anzeigen

Ereignisbehandlung​

Die Drawer-Komponente emittiert Lebenszyklusereignisse, die verwendet werden können, um Anwendungslogik als Reaktion auf Änderungen ihres offenen oder geschlossenen Status auszulösen.

Unterstützte Ereignisse:

  • DrawerOpenEvent: Wird ausgelöst, wenn der Drawer vollständig geöffnet ist.
  • DrawerCloseEvent: Wird ausgelöst, wenn der Drawer vollständig geschlossen ist.

Sie können Listener an diese Ereignisse anhängen, um Logik auszuführen, wenn sich der Status des Drawer ändert.

Drawer drawer = new Drawer();

drawer.addOpenListener(e -> {
  // Ereignis für geöffneten Drawer behandeln
});

drawer.addCloseListener(e -> {
  // Ereignis für geschlossenen Drawer behandeln
});

Beispiel: Kontaktwähler​

Die Drawer-Komponente zeigt zusätzlichen Inhalt an, ohne die aktuelle Ansicht zu stören. Dieses Beispiel platziert einen Drawer in der Mitte unten und enthält eine scrollbare Kontaktliste.

Jeder Kontakt zeigt ein Avatar, einen Namen, einen Standort und eine Aktionsschaltfläche für den schnellen Zugriff auf Details oder Kommunikation an. Dieser Ansatz eignet sich hervorragend zum Erstellen kompakter Werkzeuge wie Kontaktwähler, Einstellungsfenster oder Benachrichtigungen.

Code anzeigen

Beispiel: Aufgabenmanager​

Dieses Beispiel verwendet einen Drawer als Aufgabenmanager. Sie können Aufgaben hinzufügen, abhaken und erledigte entfernen. Die Fußzeile des Drawer enthält Formularsteuerelemente zur Interaktion mit der Aufgabenliste, und die „Aufgabe hinzufügen“ Button deaktiviert sich, wenn 50 Aufgaben erreicht sind.

Code anzeigen

Stil​

Loading...