Componente AppBar

¿Qué es el componente AppBar?

El componente AppBar es una barra de aplicación superior que contiene tres áreas de contenido: leading (inicio), main (central) y trailing (final).

¿Cómo se utiliza el componente AppBar?

Para usar el componente AppBar, importa la clase y configura sus propiedades:


import AppBarWidget, { AppBarWidgetStyle, PositionMainWidget } from "@seigenta/TypesCraft/widgets/appBar";
import { Icon, Text } from "@seigenta/TypesCraft/widgets";
import { Color, Size } from "@seigenta/TypesCraft/widgets/utils";

// Uso básico
new AppBarWidget({
    leadingContent: new Icon({ icon: 'menu' }),
    mainWidget: new Text({ text: 'Mi Aplicación' }),
    trailingWidget: new Icon({ icon: 'search' }),
    style: new AppBarWidgetStyle({
        backgroundColor: Color.hex("#6200ee"),
        height: Size.px(56)
    })
})

Propiedades del componente

El componente AppBar acepta las siguientes propiedades:

  • leadingContent?: (Widget) - Widget para el área inicial (ej: icono de menú)
  • mainWidget?: (Widget) - Widget principal (ej: título de la app)
  • trailingWidget?: (Widget) - Widget para el área final (ej: iconos de acción)
  • style?: (AppBarWidgetStyle) - Estilo del AppBar

AppBarWidgetStyle - Propiedades de estilo

El objeto AppBarWidgetStyle permite configurar:

  • backgroundColor?: (Color) - Color de fondo del AppBar
  • height?: (Size) - Altura del AppBar (default: 56px)
  • elevate?: (Size) - Elevación (sombra) del AppBar
  • PositionMainWidget?: (PositionMainWidget) - Posición del contenido principal (LEFT, CENTER, RIGHT)
  • padding?: (EdgeSize) - Relleno interno
  • css?: (Css) - Estilos CSS personalizados

Ejemplos de uso

Ejemplo básico con iconos y título centrado:


new AppBarWidget({
    leadingContent: new Icon({ icon: 'menu' }),
    mainWidget: new Text({ text: 'Mi App' }),
    trailingWidget: new Icon({ icon: 'settings' }),
    style: new AppBarWidgetStyle({
        backgroundColor: Color.hex("#6200ee"),
        height: Size.px(56),
        elevate: Size.px(4),
        PositionMainWidget: PositionMainWidget.CENTER
    })
})

Ejemplo avanzado con múltiples acciones:


new AppBarWidget({
    leadingContent: new Icon({ icon: 'arrow_back' }),
    mainWidget: new Text({ text: 'Detalles del Producto' }),
    trailingWidget: new Row({
        children: [
            new Icon({ icon: 'favorite' }),
            new Icon({ icon: 'share' }),
            new Icon({ icon: 'more_vert' })
        ],
        style: new RowStyle({
            spacing: Size.px(16)
        })
    }),
    style: new AppBarWidgetStyle({
        backgroundColor: Color.hex("#ffffff"),
        height: Size.px(64),
        elevate: Size.px(2),
        padding: EdgeSize.symmetric({
            horizontal: Size.px(16)
        })
    })
})

Comportamiento

El componente AppBar:

  • Organiza el contenido en 3 áreas claramente definidas (leading, main, trailing)
  • Soporta sombra/elevación configurable
  • Permite posicionar el contenido principal a izquierda, centro o derecha
  • Genera estilos CSS eficientes reutilizables
  • Es altamente personalizable mediante widgets en cada área