Componente Foundation Widget

¿Qué es el componente Foundation Widget?

El Foundation Widget es un componente estructural que proporciona layouts predefinidos para aplicaciones con elementos comunes como app bars, drawers y bottom navigation. Nota: Los colores y estilos mostrados en los ejemplos son ilustrativos.

¿Cómo se utiliza el Foundation Widget?

Para utilizar el componente, se debe importar y configurar con sus propiedades:


import FoundationWidget, { 
  FoundationStyle, 
  TypeFoundationWidget 
} from "@seigenta/TypesCraft/widgets/foundation-widget";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import EdgeSize from "@seigenta/TypesCraft/widgets/utils/edgeSize";

new FoundationWidget({
  appBar: ..., // Widget para la barra superior
  drawer: ..., // Widget para el drawer lateral
  body: ..., // Widget para el contenido principal
  bottomWidget: ..., // Widget para la navegación inferior
  mode: TypeFoundationWidget.Type1(), // Modo de layout
  style: new FoundationStyle({
    backgroundColor: Color.red(),
    paddingBody: EdgeSize.all(Size.px(10))
  })
})

Modos de Layout

El Foundation Widget ofrece 3 modos de layout diferentes:

Type 1 (Modo tradicional)

Estructura clásica con appBar arriba, drawer y body en fila, y bottomWidget abajo.


<div class="foundation-widget">
  <div class="foundation-appBar"><!-- AppBar content --></div>
  <div class="row">
    <div class="foundation-drawer"><!-- Drawer content --></div>
    <div class="foundation-body"><!-- Body content --></div>
  </div>
  <div class="foundation-bottomWidget"><!-- Bottom content --></div>
</div>
Foundation Widget Type 1

Type 2 (Drawer + Columna)

Drawer lateral con columna (appBar + body) en fila, y bottomWidget abajo.


<div class="foundation-widget">
  <div class="row">
    <div class="foundation-drawer"><!-- Drawer content --></div>
    <div class="column">
      <div class="foundation-appBar"><!-- AppBar content --></div>
      <div class="foundation-body"><!-- Body content --></div>
    </div>
  </div>
  <div class="foundation-bottomWidget"><!-- Bottom content --></div>
</div>
Foundation Widget Type 2

Type 3 (Todo en columna)

Drawer lateral con columna que contiene appBar, body y bottomWidget.


<div class="foundation-widget">
  <div class="row">
    <div class="foundation-drawer"><!-- Drawer content --></div>
    <div class="column">
      <div class="foundation-appBar"><!-- AppBar content --></div>
      <div class="foundation-body"><!-- Body content --></div>
      <div class="foundation-bottomWidget"><!-- Bottom content --></div>
    </div>
  </div>
</div>
Foundation Widget Type 3

Propiedades del Foundation Widget

  • appBar?: (Widget) - Widget para la barra superior
  • drawer?: (Widget) - Widget para el drawer lateral
  • body?: (Widget) - Widget para el contenido principal
  • bottomWidget?: (Widget) - Widget para la navegación inferior
  • mode: (TypeFoundationWidget) - Modo de layout (Type1, Type2 o Type3)
  • updateAppBar?: (boolean) - Si el appBar puede actualizarse
  • updateDrawer?: (boolean) - Si el drawer puede actualizarse
  • updateBody?: (boolean) - Si el body puede actualizarse
  • updateBottomWidget?: (boolean) - Si el bottomWidget puede actualizarse
  • key?: (string) - Identificador único
  • id?: (string) - ID HTML

Estilos

El Foundation Widget usa FoundationStyle para sus estilos:

  • backgroundColor?: (Color) - Color de fondo
  • paddingBody?: (EdgeSize) - Padding del contenido principal
  • css?: (Css) - CSS personalizado

Ejemplo Completo 


class PageExample extends Component {
  build(_: Context): Widget<any> | null {
    return new FoundationWidget({
      style: new FoundationStyle({
        backgroundColor: Color.red().opacity(0.1),
        paddingBody: EdgeSize.all(Size.px(10)),
      }),
      mode: TypeFoundationWidget.Type1(),
      drawer: new Column({
        style: new ColumnStyle({
          mainAxisAlign: MainAxisAlign.start(),
          crossAxisAlign: CrossAxisAlign.start(),
          backgroundColor: Color.hex("#f0f0f0"),
          padding: EdgeSize.symmetric({
            horizontal: Size.px(6),
            vertical: Size.px(3),
          }),
          height: Size.extend(),
        }),
        children: [
          new Text({
            text: "drawer",
          }),
        ],
      }),
      appBar: new Row({
        style: new ColumnStyle({
          mainAxisAlign: MainAxisAlign.center(),
          crossAxisAlign: CrossAxisAlign.center(),
          backgroundColor: Color.hex("#6200ee"),
          padding: EdgeSize.symmetric({
            horizontal: Size.px(16),
            vertical: Size.px(8),
          }),
          height: Size.px(56),
        }),
        children: [
          new Text({
            text: "appBar",
          }),
        ],
      }),
      bottomWidget: new Row({
        style: new ColumnStyle({
          mainAxisAlign: MainAxisAlign.center(),
          crossAxisAlign: CrossAxisAlign.center(),
          backgroundColor: Color.hex("#6200ee"),
          padding: EdgeSize.symmetric({
            horizontal: Size.px(16),
            vertical: Size.px(8),
          }),
          height: Size.px(56),
        }),
        children: [
          new Text({
            text: "bottomWidget",
          }),
        ],
      }),
      body: new Center({
        child: new Column({
          style: new ColumnStyle({
            mainAxisAlign: MainAxisAlign.center(),
            crossAxisAlign: CrossAxisAlign.center(),
            padding: EdgeSize.all(Size.px(40)),
          }),
          children: [
            new Text({
              text: "Body",
            }),
          ],
        }),
      }),
    });
  }
}