Passer 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érale flexible et organisé, avec un support pour les 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 avec des icônes, des 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("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);
Lien 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 déranger les utilisateurs qui s'attendent à ce qu'ils révèlent des sous-éléments au lieu de naviguer ailleurs.

Si vous souhaitez que l'en-tête de groupe déclenche une action personnalisée (comme ouvrir des docs externes), laissez le chemin du groupe vide et ajoutez plutôt un contrôle interactif comme un IconButton à suffixe de l'élément. Cela maintient une UX cohérente 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 à l'aide de chemins statiques ou de classes de vue enregistrées.

Chemins statiques​

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

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

Vues enregistrées​

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

AppNavItem settings = new AppNavItem("Settings", 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 advanced = new AppNavItem("User", 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("Advanced", 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) : 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 help = new AppNavItem("Help", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Préfixe et suffixe​

AppNavItem supporte 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 l'étiquette, utile pour les icônes.
  • Suffixe : apparaît après l'étiquette, idéal pour les badges ou les actions.
AppNavItem notifications = new AppNavItem("Alerts");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));

Groupes auto-ouverts​

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

nav.setAutoOpen(true);

Styliser AppNavItem​

Loading...