Barra

El componente EBar organiza un título, activadores de navegación y acciones contextuales en una superficie horizontal. Su color, elevación, borde y densidad establecen el énfasis visual adecuado para cada contexto.

Uso

Ajusta color y elevation para definir la superficie de la barra. Usa ESpacer para separar su identidad de las acciones finales.

Workspace
primary
sm

Densidad

La barra predeterminada mide 64px de alto. Activa dense para una barra compacta de 48px cuando la interfaz circundante ya proporcione suficiente contexto y los objetivos táctiles permanezcan claros.

Barra densa

Contenido y acciones

La prop outlined aplica un borde al componente y reemplaza la sombra por un estilo más definido.

Proyectos

Referencia API

Consulta las props públicas verificadas de EBar. Sus slots de contenido se resumen después de la tabla.

PropiedadTipoPor defecto
appbooleanfalse

Registra la barra en el contexto de layout de EApp más cercano para que EMain y EDrawer reciban sus offsets.

colorstringundefined

Resuelve los colores de fondo y contraste legible de la barra desde el tema activo.

densebooleanfalse

Usa la altura compacta de 48px en lugar de la altura predeterminada de 64px.

heightstring | numberundefined

Define una altura explícita y reemplaza la altura estándar o dense.

fixedbooleanfalse

Fija la barra a su viewport contenedor y conserva su registro en el layout.

absolutebooleanfalse

Posiciona la barra de forma absoluta dentro de su bloque contenedor.

clippedbooleanfalse

Extiende una app bar sobre la región del drawer y desplaza debajo un drawer coordinado.

outlinedbooleanfalse

Agrega un borde fino y elimina la sombra de la barra.

depressedbooleanfalse

Elimina la elevación visual de la barra.

elevationElevationLevelundefined

Aplica un nivel de elevación del framework a la barra.

Slots

El slot default contiene el contenido principal de la barra. El slot append renderiza una región adicional después de este.