Saltar al contenido

Toolbar

Abrir en ChatGPT
Shadow dwc-toolbar 24.12
Java API

Las barras de herramientas ofrecen a los usuarios acceso rápido a acciones centrales y elementos de navegación. El componente webforJ Toolbar es un contenedor horizontal que puede albergar 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​

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

  • Inicio: Usualmente contiene un AppDrawerToggle o un botón de inicio.
  • Título: Utilizado 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 demo muestra cómo agregar un Toolbar a un AppLayout y utilizar todos los slots soportados de manera efectiva. Para leer más sobre la implementación de barras de herramientas dentro de un AppLayout, consulta Barras de herramientas pegajosas y Diseño de navegación móvil.

Mostrar Código

Modo compacto​

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

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

ProgressBar en barreras 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 un Toolbar, el ProgressBar se alinea cuidadosamente 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

Estilización​

Temas​

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

Mostrar Código

Loading...