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 y elementos de navegación esenciales. El componente Toolbar de webforJ 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: Generalmente 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, consulte Barras de herramientas fijas y Diseño de navegación móvil.

Mostrar Código

Modo compacto​

Utilice setCompact(true) para reducir el padding alrededor de una Toolbar. Esto es útil cuando necesita 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 utiliza comúnmente en encabezados, barras laterales o diseños donde el espacio es escaso.

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

ProgressBar en barras de herramientas​

Una 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, la ProgressBar se alinea perfectamente a lo largo del borde inferior, haciéndola discreta mientras comunica claramente el progreso a los usuarios.

Puede combinarla 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...