Saltar al contenido principal

AppNav

Abrir en ChatGPT
Shadow dwc-app-nav dwc-app-nav-item 24.12
Java API

El componente AppNav en webforJ proporciona un menú de navegación lateral flexible y organizado con soporte para estructuras planas y jerárquicas. Cada entrada es un AppNavItem, que puede representar un enlace simple o un grupo que contiene subelementos. Los elementos pueden estar vinculados a vistas internas o recursos externos, mejorados con íconos, insignias u otros componentes.

Agregar y anidar elementos​

Las instancias de AppNavItem se utilizan para poblar la estructura de AppNav. Estos elementos pueden ser enlaces simples o encabezados de grupo anidados que contienen elementos hijos. Los encabezados de grupo sin enlaces actúan como contenedores expandibles.

Utiliza addItem() para incluir elementos en la navegación:

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);
Vinculación de Elementos de Grupo

Los elementos de nivel superior en un árbol de navegación generalmente están destinados a ser expandibles, no enlaces clicables. Establecer un path en tales elementos puede confundir a los usuarios que esperan que revelen subelementos en lugar de navegar a otro lugar.

Si deseas que el encabezado del grupo active una acción personalizada (como abrir documentación externa), mantén la ruta del grupo vacía y, en su lugar, agrega un control interactivo como un IconButton al sufijo del elemento. Esto mantiene la experiencia de usuario consistente y limpia.

Mostrar Código

Vinculación de Elementos​

Cada AppNavItem puede navegar a una vista interna o a un enlace externo. Puedes definir esto usando rutas estáticas o clases de vista registradas.

Rutas estáticas​

Utiliza rutas de cadena para definir enlaces directamente:

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

Vistas registradas​

Si tus vistas están registradas con el router, puedes pasar la clase en lugar de una URL codificada:

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

Si tu ruta anotada admite parámetros de ruta, también puedes pasar un ParametersBag:

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

Con parámetros de consulta​

Pasa un ParametersBag para incluir cadenas de consulta:

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

Comportamiento de destino​

Controla cómo se abren los enlaces utilizando setTarget(). Esto es especialmente útil para enlaces externos o vistas emergentes.

  • SELF (predeterminado): Se abre en la vista actual.
  • BLANK: Se abre en una nueva pestaña o ventana.
  • PARENT: Se abre en el contexto de navegación padre.
  • TOP: Se abre en el contexto de navegación de nivel superior.
AppNavItem help = new AppNavItem("Help", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Prefijo y sufijo​

AppNavItem admite componentes de prefijo y sufijo. Utiliza estos para proporcionar claridad visual con íconos, insignias o botones.

  • Prefijo: aparece antes de la etiqueta, útil para íconos.
  • Sufijo: aparece después de la etiqueta, excelente para insignias o acciones.
AppNavItem notifications = new AppNavItem("Alerts");
notifications.setPrefixComponent(TablerIcon.create("alert"));
notifications.setSuffixComponent(TablerIcon.create("link"));

Grupos de apertura automática​

Utiliza setAutoOpen(true) en el componente AppNav para expandir automáticamente los grupos anidados cuando se actualiza la aplicación.

nav.setAutoOpen(true);

Estilizando AppNavItem​

Loading...