Saltar al contenido

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, distintivos 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 secundarios. 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);
Vincular elementos de grupo

Los elementos de nivel superior en un árbol de navegación están destinados típicamente a ser expandibles, no enlaces clicables. Establecer una 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 de grupo desencadene una acción personalizada (como abrir documentos externos), 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 del usuario consistente y limpia.

Mostrar Código

Vincular elementos​

Cada AppNavItem puede navegar a una vista interna o a un enlace externo. Puedes definir esto utilizando 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 del destino​

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

  • SELF (predeterminado): Abre en la vista actual.
  • BLANK: Abre en una nueva pestaña o ventana.
  • PARENT: Abre en el contexto de navegación padre.
  • TOP: 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, distintivos o botones.

  • Prefijo: aparece antes de la etiqueta, útil para íconos.
  • Sufijo: aparece después de la etiqueta, ideal para distintivos 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 app.

nav.setAutoOpen(true);

Estilizando AppNavItem​

Loading...