Saltar al contenido principal

Toolbar

Abrir en ChatGPT
Sombra dwc-toolbar 24.12
Java API

Las barras de herramientas ofrecen a los usuarios un acceso rápido a acciones fundamentales y elementos de navegación. El componente webforJ Toolbar es un contenedor horizontal que puede contener un conjunto de botones de acción, íconos u otros componentes. Es ideal para gestionar controles de página y albergar funciones clave como una barra de búsqueda o un botón de notificación.

Organizando el contenido de la barra de herramientas

La Toolbar organiza componentes esenciales en un diseño fácilmente accesible y consistente. Por defecto, ocupa el ancho completo de su elemento padre y proporciona cuatro áreas de colocación, o slots, para organizar componentes:

  • Inicio: Por lo general, contiene un AppDrawerToggle o un botón de inicio.
  • Título: Usado para nombres de aplicaciones o logotipos.
  • Contenido: Para acciones de alta atención como búsqueda o navegación.
  • Fin: Acciones menos frecuentes, como perfil de usuario o ayuda.

Cada slot tiene un método para agregar componentes: addToStart(), addToTitle(), addToContent(), y addToEnd().

La siguiente demostración muestra cómo agregar una Toolbar a un AppLayout y utilizar todos los slots soportados de manera efectiva. Para leer más sobre cómo implementar barras de herramientas dentro de un AppLayout, consulta Barras de herramientas adhesivas y Diseño de navegación móvil.

Mostrar Código

Modo compacto

Utiliza setCompact(true) para reducir el padding alrededor de una Toolbar. Esto es útil cuando necesitas ajustar más contenido en pantalla, especialmente en aplicaciones con barras de herramientas apiladas o espacio limitado. La barra de herramientas sigue comportándose de la misma manera; solo se reduce la altura. Este modo se utiliza comúnmente en encabezados, barras laterales o diseños donde el espacio es reducido.

Toolbar toolbar = new Toolbar();
toolbar.setCompact(true);
Mostrar Código

ProgressBar en las barras de herramientas

Un ProgressBar sirve como un indicador visual para procesos en curso, como cargar datos, subir archivos o completar pasos en un flujo. Cuando se coloca dentro de una Toolbar, el ProgressBar se alinea de manera ordenada a lo largo del borde inferior, haciéndolo discreto mientras comunica claramente el progreso a los usuarios.

Puedes combinarlo con otros componentes en la barra de herramientas, como botones o etiquetas, sin interrumpir el diseño.

Mostrar Código

Estilo

Temas

Los componentes Toolbar incluyen siete temas integrados para una rápida personalización visual:

Mostrar Código

Loading...