Zum Hauptinhalt springen

Drawer

In ChatGPT öffnen
Schatten dwc-drawer 24.00
Java API

Die Drawer-Komponente in webforJ erstellt ein schiebendes Panel, das von der Kante des Bildschirms erscheint und zusätzlichen Inhalt offenbart, 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 Hauptschnittstelle zu stören.

Stapeln​

Drawers stapeln sich automatisch, wenn mehrere geöffnet werden, was sie zu einer flexiblen Wahl für platzbeschränkte Schnittstellen macht.

Das unten stehende Beispiel zeigt dieses Verhalten innerhalb der AppLayout-Komponente. Der Navigations-Drawer, der durch das Hamburger-Menü ausgelöst wird, ist in AppLayout integriert, während das Willkommens-Popup unten eine eigenständige Drawer-Instanz verwendet. Beide coexistieren und stapeln sich unabhängig, was demonstriert, wie Drawers in Layout-Komponenten integriert oder als eigenständige Elemente verwendet werden können.

Code anzeigen

Autofokus​

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

Code anzeigen

Etikett​

Die Methode setLabel() kann eine aussagekräftige Beschreibung des Inhalts innerhalb eines Drawers bereitstellen. Wenn ein Etikett gesetzt ist, können assistive Technologien wie Bildschirmlesegeräte es ankündigen, was den Benutzern hilft, den Zweck des Drawers zu verstehen, ohne dessen visuelle Inhalte zu sehen.

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

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

Größe​

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

Sie können den Wert mit jeder gültigen CSS-Einheit wie einem Prozentsatz, Pixeln 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 damit:

// 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 Methode setPlacement() steuert, wo der Drawer im Ansichtsfenster angezeigt wird.

Verfügbare Platzierungsoptionen:

  • OBEN: Positioniert 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: Positioniert den Drawer entlang der linken Kante des Ansichtsfensters.
  • RECHTS: Positioniert den Drawer entlang der rechten Kante des Ansichtsfensters.
Code anzeigen

Ereignisbehandlung​

Die Drawer-Komponente gibt Lebenszyklusereignisse aus, die verwendet werden können, um App-Logik als Reaktion auf Änderungen im offenen oder geschlossenen Zustand 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 diesen Ereignissen anhängen, um Logik auszuführen, wenn sich der Zustand des Drawers ändert.

Drawer drawer = new Drawer();

drawer.addOpenListener(e -> {
  // Handle drawer opened event
});

drawer.addCloseListener(e -> {
  // Handle drawer closed event
});

Beispiel: Kontaktwähler​

Die Drawer-Komponente gibt zusätzlichen Inhalt ohne Störung der aktuellen Ansicht aus. Dieses Beispiel platziert einen Drawer am unteren Zentrum, der eine scrollbare Kontaktliste enthält.

Jeder Kontakt zeigt ein Avatar, Namen, Standort und Aktionsschaltfläche für schnellen Zugriff auf Details oder Kommunikation an. Dieser Ansatz funktioniert gut für den Aufbau kompakter Werkzeuge wie Kontaktwähler, Einstellungen-Panels oder Benachrichtigungen.

Code anzeigen

Beispiel: Aufgabenmanager​

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

Code anzeigen

Styling​

Loading...