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 clave y elementos de navegación. El componente de 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 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 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 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 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 que la altura se reduce. Este modo se usa 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 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 perfectamente a lo largo del borde inferior, siendo 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

Estilización​

Temas​

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

Mostrar Código

Loading...