Saltar al contenido principal

AppNav

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

El componente AppNav crea un menú de navegación lateral a partir de entradas AppNavItem. Los elementos pueden vincularse a vistas internas o recursos externos, anidarse bajo elementos principales para formar menús jerárquicos y llevar íconos, insignias u otros componentes para brindar a los usuarios más contexto de un vistazo.

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 grupos 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("Tablero", "/dashboard");
AppNavItem admin = new AppNavItem("Administración");
admin.addItem(new AppNavItem("Usuarios", "/admin/users"));
admin.addItem(new AppNavItem("Configuraciones", "/admin/settings"));

AppNav nav = new AppNav();
nav.addItem(dashboard);
nav.addItem(admin);
Vinculando Elementos de Grupo

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

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

Mostrar Código

Vinculando 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 texto para definir enlaces directamente:

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

Vistas registradas​

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

AppNavItem settings = new AppNavItem("Configuraciones", 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("Usuario", 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("Avanzado", SettingsView.class, params);
advanced.setQueryParameters(params);

Comportamiento objetivo​

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 principal.
  • TOP: Se abre en el contexto de navegación de nivel superior.
AppNavItem help = new AppNavItem("Ayuda", "https://support.example.com");
help.setTarget(AppNavItem.NavigationTarget.BLANK);

Prefijo y sufijo​

AppNavItem soporta 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, ideal para insignias o acciones.
AppNavItem notifications = new AppNavItem("Alertas");
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 refresca la aplicación.

nav.setAutoOpen(true);

Estilizando AppNavItem​

Loading...