Propiedades de layout

Autobase provee los componentes ROW y COLUMN, anidables sin límites de nivel, para poder crear layouts complejos en aplicaciones modernas.

ROW y COLUMN pueden contener cualquier componente excepto uno de su mismo tipo (o sea ROW si es un ROW, o COLUMN si es COLUMN).

A todos los componentes específicos se les agregan 2 propiedades dependiendo si están dentro de un ROW o un COLUMN, para poder aprovechar estos beneficios.

Propiedades sólo si el componente es hijo directo de un COLUMN

Propiedad	Tipo	Obligatorio	Valor predeterminado	Descripción
width	string	No	auto	Valores posibles: auto (mínimo ancho posible), full (máximo ancho posible)
align	string	No	start	Valores posibles: start (izquierda), center (centro), end (derecha)

Propiedades sólo si el componente es hijo directo de un ROW

Propiedad	Tipo	Obligatorio	Valor predeterminado	Descripción
span	string	No	auto	Valores posibles: auto (mínimo ancho posible), max (máximo ancho posible, ocupa el resto del espacio disponible), responsive-1 a responsive-4 (tamaños responsivos progresivos), responsive-max (siempre ocupa el ancho completo en todos los breakpoints)
align	string	No	start	Valores posibles: start (arriba), center (centro), end (abajo)

Ejemplo: Anidamiento de ROW y COLUMN

type: ROW
name: main_layout
gap: 1
align: stretch
children:
  # Columna izquierda (sidebar)
  - type: COLUMN
    name: sidebar
    span: 3
    gap: 12
    children:
      - type: DISPLAY
        name: menu_title
        style: subtitle
        template: Menú
      - type: BUTTON
        name: btn_dashboard
        label: Dashboard
      - type: BUTTON
        name: btn_users
        label: Usuarios
      - type: BUTTON
        name: btn_settings
        label: Configuración

  # Columna derecha (contenido principal)
  - type: COLUMN
    name: main_content
    span: 9
    gap: 16
    children:
      # Encabezado
      - type: ROW
        name: header
        gap: 16
        align: center
        justify: between
        children:
          - type: DISPLAY
            name: page_title
            style: title
            template: Gestión de Usuarios
          - type: BUTTON
            name: add_user_button
            label: Agregar usuario

      # Filtros
      - type: ROW
        name: filters
        gap: 8
        align: center
        children:
          - type: FORM
            name: search_form
            span: 6
            items:
              - type: TEXT_FIELD
                name: search_input
                label: Buscar usuario

          - type: FORM
            name: status_form
            span: 3
            items:
              - type: SELECT_FIELD
                name: status_filter
                label: Estado

          - type: FORM
            name: date_form
            span: 3
            items:
              - type: TEXT_FIELD
                name: date_filter
                label: Fecha

      # Tabla de usuarios
      - type: TABLE
        name: users_table
        columns:
          - name: email
            label: Correo
          - name: status
            label: Estado
          - name: created_at
            label: Creado