Zum Hauptinhalt springen

AppNav

In ChatGPT öffnen
Shadow dwc-app-nav dwc-app-nav-item 24.12
Java API

Die AppNav-Komponente in webforJ bietet ein flexibles und organisiertes Seiten-Navigationsmenü mit Unterstützung sowohl für flache als auch hierarchische Strukturen. Jedes Element ist ein AppNavItem, das einen einfachen Link oder eine Gruppe mit Unterelementen repräsentieren kann. Elemente können mit internen Ansichten oder externen Ressourcen verknüpft werden und werden durch Symbole, Abzeichen oder andere Komponenten ergänzt.

Hinzufügen und Verschachteln von Elementen​

Instanzen von AppNavItem werden verwendet, um die AppNav-Struktur zu füllen. Diese Elemente können einfache Links oder verschachtelte Gruppenüberschriften sein, die untergeordnete Elemente enthalten. Gruppenüberschriften ohne Links fungieren als erweiterbare Container.

Verwenden Sie addItem(), um Elemente in der Navigation einzufügen:

AppNavItem dashboard = new AppNavItem("Dashboard", "/dashboard");
AppNavItem admin = new AppNavItem("Admin");
admin.addItem(new AppNavItem("Benutzer", "/admin/users"));
admin.addItem(new AppNavItem("Einstellungen", "/admin/settings"));

AppNav nav = new AppNav();
nav.addItem(dashboard);
nav.addItem(admin);
Verlinken von Gruppenobjekten

Obere Elemente in einem Navigationsbaum sollen in der Regel erweiterbar und keine klickbaren Links sein. Das Setzen eines path auf solchen Elementen kann Benutzer verwirren, die erwarten, dass sie Unterelemente offenbaren, anstatt woanders zu navigieren.

Wenn Sie möchten, dass die Gruppenüberschrift eine benutzerdefinierte Aktion auslöst (wie das Öffnen externer Dokumente), lassen Sie den Gruppenpfad leer und fügen Sie stattdessen eine interaktive Steuerung wie einen IconButton am Suffix des Elements hinzu. Dies sorgt für eine konsistente und saubere Benutzererfahrung.

Code anzeigen

Verlinken von Elementen​

Jedes AppNavItem kann zu einer internen Ansicht oder einem externen Link navigieren. Sie können dies mithilfe statischer Pfade oder registrierter Ansichtsklassen definieren.

Statische Pfade​

Verwenden Sie Zeichenfolgenpfade, um Links direkt zu definieren:

AppNavItem docs = new AppNavItem("Dokumente", "/docs");
AppNavItem help = new AppNavItem("Hilfe", "https://support.example.com");

Registrierte Ansichten​

Wenn Ihre Ansichten beim Router registriert sind, können Sie die Klasse anstelle einer fest codierten URL übergeben:

AppNavItem settings = new AppNavItem("Einstellungen", SettingsView.class);

Wenn Ihre annotierte Route Routenparameter unterstützt, können Sie auch eine ParametersBag übergeben:

ParametersBag params = ParametersBag.of("id=123");
AppNavItem advanced = new AppNavItem("Benutzer", UserView.class, params);

Mit Abfrageparametern​

Übergeben Sie eine ParametersBag, um Abfragezeichenfolgen einzuschließen:

ParametersBag params = ParametersBag.of("param1=value1&param2=value2");
AppNavItem advanced = new AppNavItem("Erweitert", SettingsView.class, params);
advanced.setQueryParameters(params);

Zielverhalten​

Steuern Sie, wie Links geöffnet werden, mit setTarget(). Dies ist besonders nützlich für externe Links oder Pop-out-Ansichten.

  • SELF (Standard): Öffnet in der aktuellen Ansicht.
  • BLANK: Öffnet in einem neuen Tab oder Fenster.
  • PARENT: Öffnet im übergeordneten Browsing-Kontext.
  • TOP: Öffnet im obersten Browsing-Kontext.
AppNavItem help = new AppNavItem("Hilfe", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Präfix und Suffix​

AppNavItem unterstützt Präfix- und Suffixkomponenten. Verwenden Sie diese, um visuelle Klarheit mit Symbolen, Abzeichen oder Schaltflächen zu schaffen.

  • Präfix: erscheint vor dem Label und ist nützlich für Symbole.
  • Suffix: erscheint nach dem Label und ist großartig für Abzeichen oder Aktionen.
AppNavItem notifications = new AppNavItem("Warnungen");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));

Automatisches Öffnen von Gruppen​

Verwenden Sie setAutoOpen(true) an der AppNav-Komponente, um automatisch verschachtelte Gruppen zu erweitern, wenn die App aktualisiert wird.

nav.setAutoOpen(true);

Styling von AppNavItem​

Loading...