Passer au contenu principal

AppNav

Ouvrir dans ChatGPT
Ombre dwc-app-nav dwc-app-nav-item 24.12
Java API

Le composant AppNav crée un menu de navigation latéral à partir des entrées AppNavItem. Les éléments peuvent se lier à des vues internes ou à des ressources externes, s'imbriquer sous des éléments parents pour former des menus hiérarchiques, et porter des icônes, des badges ou d'autres composants pour donner aux utilisateurs plus de contexte d'un coup d'œil.

Ajout et imbrication des éléments​

Les instances AppNavItem sont utilisées pour peupler la structure AppNav. Ces éléments peuvent être des liens simples ou des en-têtes de groupe imbriqués qui contiennent des éléments enfants. Les en-têtes de groupe sans liens agissent comme des conteneurs extensibles.

Utilisez addItem() pour inclure des éléments dans la navigation :

AppNavItem tableauDeBord = new AppNavItem("Tableau de bord", "/dashboard");
AppNavItem admin = new AppNavItem("Admin");
admin.addItem(new AppNavItem("Utilisateurs", "/admin/users"));
admin.addItem(new AppNavItem("Paramètres", "/admin/settings"));

AppNav nav = new AppNav();
nav.addItem(tableauDeBord);
nav.addItem(admin);
Liens des éléments de groupe

Les éléments de niveau supérieur dans un arbre de navigation sont généralement destinés à être extensibles — pas des liens cliquables. Définir un path sur de tels éléments peut confondre les utilisateurs qui s'attendent à ce qu'ils révèlent des sous-éléments plutôt que de naviguer ailleurs.

Si vous souhaitez que l'en-tête de groupe déclenche une action personnalisée (comme ouvrir des documents externes), gardez le chemin du groupe vide et ajoutez plutôt un contrôle interactif comme un IconButton à la suffixe de l'élément. Cela garde l'UX cohérent et propre.

Afficher le code

Lien des éléments​

Chaque AppNavItem peut naviguer vers une vue interne ou un lien externe. Vous pouvez définir cela en utilisant des chemins statiques ou des classes de vue enregistrées.

Chemins statiques​

Utilisez des chemins de chaîne pour définir des liens directement :

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

Vues enregistrées​

Si vos vues sont enregistrées avec le router, vous pouvez passer la classe au lieu d'une URL codée en dur :

AppNavItem paramètres = new AppNavItem("Paramètres", SettingsView.class);

Si votre route annotée prend en charge des paramètres de route, vous pouvez également passer un ParametersBag :

ParametersBag params = ParametersBag.of("id=123");
AppNavItem avancé = new AppNavItem("Utilisateur", UserView.class, params);

Avec des paramètres de requête​

Passez un ParametersBag pour inclure des chaînes de requête :

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

Comportement cible​

Contrôlez comment les liens s'ouvrent à l'aide de setTarget(). Ceci est particulièrement utile pour les liens externes ou les vues pop-out.

  • SELF (par défaut) : S'ouvre dans la vue actuelle.
  • BLANK : S'ouvre dans un nouvel onglet ou une nouvelle fenêtre.
  • PARENT : S'ouvre dans le contexte de navigation parent.
  • TOP : S'ouvre dans le contexte de navigation de niveau supérieur.
AppNavItem aide = new AppNavItem("Aide", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Préfixe et suffixe​

AppNavItem prend en charge les composants de préfixe et de suffixe. Utilisez-les pour fournir de la clarté visuelle avec des icônes, des badges ou des boutons.

  • Préfixe : apparaît avant le label, utile pour les icônes.
  • Suffixe : apparaît après le label, idéal pour les badges ou les actions.
AppNavItem notifications = new AppNavItem("Alertes");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));

Groupes à ouverture automatique​

Utilisez setAutoOpen(true) sur le composant AppNav pour étendre automatiquement les groupes imbriqués lorsque l'application est rafraîchie.

nav.setAutoOpen(true);

Style de AppNavItem​

Loading...