Overslaan naar hoofdinhoud

AppNav

Openen in ChatGPT
Shadow dwc-app-nav dwc-app-nav-item 24.12
Java API

De AppNav-component in webforJ biedt een flexibele en georganiseerde zij-navigatiemenu met ondersteuning voor zowel vlakke als hiërarchische structuren. Elk item is een AppNavItem, dat een eenvoudige link of een groep met sub-items kan vertegenwoordigen. Items kunnen worden gekoppeld aan interne weergaven of externe bronnen, verbeterd met pictogrammen, onderscheidingen of andere componenten.

Toevoegen en nesten van items​

AppNavItem-instanties worden gebruikt om de AppNav-structuur te populeren. Deze items kunnen eenvoudige links zijn of geneste groepskoppen die kind-items bevatten. Groepskoppen zonder links fungeren als uitbreidbare containers.

Gebruik addItem() om items aan de navigatie toe te voegen:

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

AppNav nav = new AppNav();
nav.addItem(dashboard);
nav.addItem(admin);
Groep Items Koppelen

Hoofdniveauelementen in een navigatieboom zijn doorgaans bedoeld om uit te vouwen—niet om klikbare links te zijn. Een path instellen op dergelijke items kan verwarrend zijn voor gebruikers die verwachten dat ze sub-items onthullen in plaats van elders naartoe te navigeren.

Als je wilt dat de groepskop een aangepaste actie triggert (zoals het openen van externe documenten), houd dan het pad van de groep leeg en voeg in plaats daarvan een interactieve controle zoals een IconButton toe aan de suffix van het item. Dit houdt de UX consistent en schoon.

Toon Code

Items Koppelen​

Elk AppNavItem kan navigeren naar een interne weergave of een externe link. Je kunt dit definiëren met statische paden of geregistreerde weergaveklassen.

Statische paden​

Gebruik string-paden om links direct te definiëren:

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

Geregistreerde weergaven​

Als je weergaven zijn geregistreerd bij de router, kun je de klasse doorgeven in plaats van een hardcoded URL:

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

Als je geannoteerde route routeparameters ondersteunt, kun je ook een ParametersBag doorgeven:

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

Met queryparameters​

Geef een ParametersBag door om querystrings op te nemen:

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

Doelgedrag​

Beheer hoe links openen met setTarget(). Dit is vooral nuttig voor externe links of pop-out-weergaven.

  • SELF (standaard): Opent in de huidige weergave.
  • BLANK: Opent in een nieuw tabblad of venster.
  • PARENT: Opent in de bovenliggende browsecontext.
  • TOP: Opent in de bovenste browsecontext.
AppNavItem help = new AppNavItem("Help", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Voorvoegsel en achtervoegsel​

AppNavItem ondersteunt voorvoegsel- en achtervoegselcomponenten. Gebruik deze om visuele duidelijkheid te bieden met pictogrammen, onderscheidingen of knoppen.

  • Voorvoegsel: verschijnt vóór het label, nuttig voor pictogrammen.
  • Achtervoegsel: verschijnt na het label, geweldig voor onderscheidingen of acties.
AppNavItem notifications = new AppNavItem("Alerts");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));

Automatisch openen van groepen​

Gebruik setAutoOpen(true) op de AppNav-component om geneste groepen automatisch uit te vouwen wanneer de app wordt vernieuwd.

nav.setAutoOpen(true);

Stylen van AppNavItem​

Loading...