Overslaan naar hoofdinhoud

AppNav

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

De AppNav component creëert een zij navigatiemenu uit AppNavItem ingangen. Items kunnen linken naar interne weergaven of externe bronnen, onder ouders items genest worden om hiërarchische menu's te vormen, en iconen, badges of andere componenten dragen om gebruikers sneller context te geven.

Items toevoegen en nestelen​

AppNavItem instanties worden gebruikt om de AppNav structuur te vullen. Deze items kunnen eenvoudige links zijn of geneste groepshoofden die kinditems bevatten. Groepshoofden zonder links fungeren als uitvouwbare 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("Gebruikers", "/admin/users"));
admin.addItem(new AppNavItem("Instellingen", "/admin/settings"));

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

Hoogwaardige items in een navigatiestructuur zijn doorgaans bedoeld om uitvouwbaar te zijn—en niet als klikbare links. Een path instellen op dergelijke items kan verwarring bij gebruikers veroorzaken die verwachten dat ze sub-items onthullen in plaats van ergens anders naartoe te navigeren.

Als je wilt dat de groepsheader een aangepaste actie trigger (zoals het openen van externe documentatie), houd het groepspad leeg en voeg in plaats daarvan een interactieve controle zoals een IconButton toe aan de suffix van het item. Dit houdt de gebruikerservaring consistent en overzichtelijk.

Toon Code

Items Koppelen​

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

Statische paden​

Gebruik stringpaden om links direct te definiëren:

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

Geregistreerde weergaven​

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

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

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

ParametersBag params = ParametersBag.of("id=123");
AppNavItem advanced = new AppNavItem("Gebruiker", 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("Gevorderd", 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): Open in de huidige weergave.
  • BLANK: Open in een nieuw tabblad of venster.
  • PARENT: Open in de bovenliggende browse-context.
  • TOP: Open in de bovenste browse-context.
AppNavItem help = new AppNavItem("Help", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Prefix en suffix​

AppNavItem ondersteunt prefix- en suffixcomponenten. Gebruik deze om visuele duidelijkheid te bieden met iconen, badges of knoppen.

  • Prefix: verschijnt voor het label, nuttig voor iconen.
  • Suffix: verschijnt na het label, geweldig voor badges of acties.
AppNavItem notifications = new AppNavItem("Alerts");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));

Automatisch openen groepen​

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

nav.setAutoOpen(true);

Styling AppNavItem​

Loading...