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 de AppNavItem. Los elementos pueden enlazar a vistas internas o recursos externos, anidarse bajo elementos principales para formar menús jerárquicos, y llevar iconos, insignias u otros componentes para dar 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 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);
Enlazando Elementos de Grupo

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

Si deseas que el encabezado del grupo desencadene una acción personalizada (como abrir documentos externos), mantén el path del grupo vacío 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

Enlazando 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 enrutador, puedes pasar la clase en lugar de una URL codificada:

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

Si tu ruta anotada soporta 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 objetivo​

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);

Prefijos y sufijos​

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

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

Grupos de auto-apertura​

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

nav.setAutoOpen(true);

Estilizando AppNavItem​

Loading...