Aller au contenu principal

AppNav

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

Le composant AppNav dans webforJ fournit un menu de navigation latéral flexible et organisé avec prise en charge des structures à la fois plates et hiérarchiques. Chaque entrée est un AppNavItem, qui peut représenter un lien simple ou un groupe contenant des sous-éléments. Les éléments peuvent être liés à des vues internes ou des ressources externes, enrichis d'icônes, de badges ou d'autres composants.

Ajouter et imbriquer des éléments​

Les instances de 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 contenant 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 dashboard = new AppNavItem("Tableau de bord", "/dashboard");
AppNavItem admin = new AppNavItem("Admin");
admin.addItem(new AppNavItem("Utilisateurs", "/admin/users"));
admin.addItem(new AppNavItem("Réglages", "/admin/settings"));

AppNav nav = new AppNav();
nav.addItem(dashboard);
nav.addItem(admin);
Lien Group Items

Les éléments de premier niveau dans un arbre de navigation sont généralement destinés à être extensibles, et non 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 dans le suffixe de l'élément. Cela maintient l'expérience utilisateur cohérente et claire.

Afficher le code

Lier 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 vues enregistrées.

Chemins statiques​

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

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

Vues enregistrées​

Si vos vues sont enregistrées auprès du routeur, vous pouvez passer la classe au lieu d'une URL codée en dur :

AppNavItem settings = new AppNavItem("Réglages", SettingsView.class);

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

ParametersBag params = ParametersBag.of("id=123");
AppNavItem advanced = 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 advanced = new AppNavItem("Avancé", SettingsView.class, params);
advanced.setQueryParameters(params);

Comportement cible​

Contrôlez comment les liens s'ouvrent en utilisant setTarget(). Cela est particulièrement utile pour les liens externes ou les vues pop-out.

  • SELF (par défaut) : Ouvre dans la vue actuelle.
  • BLANK : Ouvre dans un nouvel onglet ou une nouvelle fenêtre.
  • PARENT : Ouvre dans le contexte de navigation parent.
  • TOP : Ouvre dans le contexte de navigation de niveau supérieur.
AppNavItem help = 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 une 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 actualisée.

nav.setAutoOpen(true);

Styliser AppNavItem​

Loading...