Saltar al contenido principal

Toolbar

Abrir en ChatGPT
Sombra dwc-toolbar 24.12
Java API

Las barras de herramientas ofrecen a los usuarios acceso rápido a acciones básicas 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 contener funciones clave como una barra de búsqueda o un botón de notificación.

Organizándose el contenido de la barra de herramientas​

La 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: Generalmente contiene un AppDrawerToggle o un botón de inicio.
  • Título: Utilizado para nombres o logotipos de aplicaciones.
  • 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 añadir componentes: addToStart(), addToTitle(), addToContent(), y addToEnd().

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

Mostrar Código

Modo compacto​

Utiliza setCompact(true) para reducir el relleno alrededor de una 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 de la misma manera; solo se reduce la altura. Este modo se usa comúnmente en encabezados, barras laterales o diseños donde el espacio es estrecho.

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

ProgressBar en barras de herramientas​

Un ProgressBar sirve como un indicador visual para procesos en curso, tales como cargar datos, subir archivos o completar pasos en un flujo. Cuando se coloca dentro de una Toolbar, el ProgressBar se alinea perfectamente a lo largo del borde inferior, lo que lo hace poco intrusivo 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 incorporados para una personalización visual rápida:

Mostrar Código

Loading...