Referencia de la galería de componentes de A2UI

En esta página, se proporciona una referencia integral de todos los componentes de la A2UI disponibles, incluidos los componentes de diseño, visualización, interactivos y de contenedor, así como las propiedades comunes.

Propiedades comunes

Todos los componentes, independientemente de su tipo específico, comparten un conjunto de propiedades comunes que se pueden configurar:

Propiedad Obligatorio Descripción
id Sí Es un identificador único del componente dentro de la superficie actual.
accessibility No Atributos para mejorar la accesibilidad, como etiquetas y roles
weight No Es un valor que se usa en los diseños de Row o Column para controlar cuánto espacio ocupa el componente en relación con sus elementos secundarios, de manera similar a flex-grow.

Para obtener una especificación completa de todas las propiedades, incluidas las comunes y las específicas de los componentes, consulta la Definición del catálogo estándar (esquema JSON).

Componentes de diseño

Los componentes de diseño se usan para estructurar y organizar otros componentes dentro de la interfaz de usuario. Los siguientes componentes de diseño están disponibles:

Fila

Un Row es un componente de diseño que se usa para organizar sus componentes secundarios de forma horizontal, de izquierda a derecha. Actúa como un contenedor en el que puedes colocar varios componentes uno al lado del otro. El espaciado y el posicionamiento exactos de los elementos secundarios dentro de la fila se pueden controlar con las propiedades distribution y alignment.

En la siguiente tabla, se describen las propiedades disponibles para el componente Row:

Propiedad Tipo/Valores Descripción
children explicitList o template Son los componentes secundarios que se organizarán horizontalmente dentro de la fila.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Controla cómo se distribuyen los componentes secundarios a lo largo del eje horizontal.
alignment start, center, end, stretch Controla cómo se alinean los componentes secundarios en el eje vertical.

JSON

{
  "id": "toolbar",
  "component": {
    "Row": {
      "children": { "explicitList": ["btn1", "btn2", "btn3"] },
      "distribution": "spaceBetween",
      "alignment": "center"
    }
  }
}

Columna

Un Column es un componente de diseño que se usa para organizar sus componentes secundarios de forma vertical, de arriba hacia abajo. Actúa como un contenedor en el que puedes colocar varios componentes uno debajo del otro. El espaciado y el posicionamiento exactos de los elementos secundarios dentro de la columna se pueden controlar con las propiedades distribution y alignment.

En la siguiente tabla, se describen las propiedades disponibles para el componente Column:

Propiedad Tipo/Valores Descripción
children explicitList o template Son los componentes secundarios que se organizarán verticalmente dentro de la columna.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Controla cómo se distribuyen los componentes secundarios a lo largo del eje vertical.
alignment start, center, end, stretch Controla cómo se alinean los componentes secundarios en el eje horizontal.

JSON

{
  "id": "content",
  "component": {
    "Column": {
      "children": { "explicitList": ["header", "body", "footer"] },
      "distribution": "start",
      "alignment": "stretch"
    }
  }
}

Lista

Un List es un componente de diseño que muestra una lista desplazable de elementos. Admite elementos secundarios estáticos y plantillas dinámicas para generar elementos a partir de datos. La dirección de desplazamiento puede ser vertical u horizontal.

En la siguiente tabla, se describen las propiedades disponibles para el componente List:

Propiedad Tipo/Valores Descripción
children explicitList o template Son los elementos que se mostrarán en la lista.
direction vertical, horizontal Es la dirección de desplazamiento de la lista.
alignment start, center, end, stretch Controla cómo se alinean los elementos de la lista en el eje transversal.

JSON

{
  "id": "message-list",
  "component": {
    "List": {
      "children": {
        "template": {
          "dataBinding": "/messages",
          "componentId": "message-item"
        }
      },
      "direction": "vertical"
    }
  }
}

Componentes de pantalla

Los componentes de visualización se usan para presentar información al usuario. Están disponibles los siguientes componentes de pantalla:

Texto

El componente Text muestra contenido de texto y admite varias sugerencias de diseño, como encabezados, leyendas y texto del cuerpo.

En la siguiente tabla, se describen las propiedades disponibles para el componente Text:

Propiedad Tipo/Valores Descripción
text BoundValue Es el contenido de texto que se mostrará.
usageHint h1, h2, h3, h4, h5, caption, body Es una sugerencia de diseño para el texto.

JSON

{
  "id": "title",
  "component": {
    "Text": {
      "text": { "literalString": "Welcome to A2UI" },
      "usageHint": "h1"
    }
  }
}

Imagen

Un componente Image muestra imágenes desde una URL especificada y proporciona opciones para controlar cómo la imagen se ajusta a su contenedor.

En la siguiente tabla, se describen las propiedades disponibles para el componente Image:

Propiedad Tipo/Valores Descripción
url BoundValue Es la URL de la imagen que se mostrará.
fit String Cómo debe ajustarse la imagen a su contenedor (p.ej., "cover").
usageHint String Sugerencia de uso (p.ej., "hero").

JSON

{
  "id": "hero",
  "component": {
    "Image": {
      "url": { "literalString": "https://example.com/hero.png" },
      "fit": "cover",
      "usageHint": "hero"
    }
  }
}

Ícono

El componente Icon muestra íconos de un conjunto estándar definido en el catálogo.

En la siguiente tabla, se describen las propiedades disponibles para el componente Icon:

Propiedad Tipo/Valores Descripción
name BoundValue Nombre del ícono que se mostrará (p.ej., "check").

JSON

{
  "id": "check-icon",
  "component": {
    "Icon": {
      "name": { "literalString": "check" }
    }
  }
}

Línea divisora

El componente Divider muestra una línea separadora visual, que puede ser horizontal o vertical.

En la siguiente tabla, se describen las propiedades disponibles para el componente Divider:

Propiedad Tipo/Valores Descripción
axis horizontal, vertical Es la orientación de la línea divisoria.

JSON

{
  "id": "separator",
  "component": {
    "Divider": {
      "axis": "horizontal"
    }
  }
}

Componentes interactivos

Los componentes interactivos te permiten interactuar con la aplicación, por ejemplo, proporcionar entradas o activar acciones. Están disponibles los siguientes componentes interactivos:

Botón

El componente Button es un elemento en el que se puede hacer clic y que activa una acción o un evento específico dentro de la aplicación.

En la siguiente tabla, se describen las propiedades disponibles para el componente Button:

Propiedad Tipo/Valores Descripción
child ID del componente ID del componente que se mostrará dentro del botón (p.ej., un componente de texto).
primary Booleano Indica si se trata de un botón principal (destacado).
action Objeto Es la acción que se activará cuando se haga clic en el botón.

JSON

{
  "id": "submit-btn",
  "component": {
    "Button": {
      "child": "submit-text",
      "primary": true,
      "action": {
        "name": "submit_form"
      }
    }
  }
}

TextField

El componente TextField es interactivo y te permite ingresar texto. También admite la validación opcional.

En la siguiente tabla, se describen las propiedades disponibles para el componente TextField:

Propiedad Tipo/Valores Descripción
label BoundValue Es la etiqueta del campo de texto.
text BoundValue Es el contenido de texto o la ruta vinculada.
textFieldType shortText, longText, number, obscured, date Es el tipo de campo de texto.
validationRegexp String Expresión regular para la validación.

JSON

{
  "id": "email-input",
  "component": {
    "TextField": {
      "label": { "literalString": "Email Address" },
      "text": { "path": "/user/email" },
      "textFieldType": "shortText"
    }
  }
}

CheckBox

El componente CheckBox es un botón de activación booleano que te permite activar o desactivar un parámetro de configuración.

En la siguiente tabla, se describen las propiedades disponibles para el componente CheckBox:

Propiedad Tipo/Valores Descripción
label BoundValue Es la etiqueta de la casilla de verificación.
value BoundValue (booleano) El valor de la casilla de verificación (verdadero/falso) o la ruta de acceso vinculada.

JSON

{
  "id": "terms-checkbox",
  "component": {
    "CheckBox": {
      "label": { "literalString": "I agree to the terms" },
      "value": { "path": "/form/agreedToTerms" }
    }
  }
}

Control deslizante

El componente Slider te permite seleccionar un valor numérico de un rango específico.

En la siguiente tabla, se describen las propiedades disponibles para el componente Slider:

Propiedad Tipo/Valores Descripción
value BoundValue (número) Es el valor actual del control deslizante o la ruta de vinculación.
minValue Número Es el valor mínimo del rango.
maxValue Número Es el valor máximo del rango.

JSON

{
  "id": "volume",
  "component": {
    "Slider": {
      "value": { "path": "/settings/volume" },
      "minValue": 0,
      "maxValue": 100
    }
  }
}

DateTimeInput

El componente DateTimeInput te permite elegir una fecha y hora.

En la siguiente tabla, se describen las propiedades disponibles para el componente DateTimeInput:

Propiedad Tipo/Valores Descripción
value BoundValue Es la ruta de acceso o el valor de fecha y hora seleccionado.
enableDate Booleano Indica si se debe habilitar la selección de fecha.
enableTime Booleano Indica si se debe habilitar la selección de hora.

JSON

{
  "id": "date-picker",
  "component": {
    "DateTimeInput": {
      "value": { "path": "/booking/date" },
      "enableDate": true,
      "enableTime": false
    }
  }
}

Opción múltiple

El componente MultipleChoice te permite seleccionar una o más opciones de una lista.

En la siguiente tabla, se describen las propiedades disponibles para el componente MultipleChoice:

Propiedad Tipo/Valores Descripción
options Es un array de objetos. Es la lista de opciones que puede seleccionar el usuario. Cada opción debe tener una etiqueta y un valor.
selections BoundValue Son los valores seleccionados o la ruta de vinculación.
maxAllowedSelections Número Es la cantidad máxima de selecciones permitidas.

JSON

{
  "id": "country-select",
  "component": {
    "MultipleChoice": {
      "options": [
        { "label": { "literalString": "USA" }, "value": "us" },
        { "label": { "literalString": "Canada" }, "value": "ca" }
      ],
      "selections": { "path": "/form/country" },
      "maxAllowedSelections": 1
    }
  }
}

Componentes de contenedor

Los componentes de contenedor se usan para agrupar y organizar otros componentes. Los siguientes componentes de contenedor están disponibles:

Tarjeta

Un componente Card es un contenedor con elevación, un borde y padding que agrupa contenido relacionado.

En la siguiente tabla, se describen las propiedades disponibles para el componente Card:

Propiedad Tipo/Valores Descripción
child ID del componente Es el ID del componente que se mostrará dentro de la tarjeta.

JSON

{
  "id": "info-card",
  "component": {
    "Card": {
      "child": "card-content"
    }
  }
}

Un componente Modal es un diálogo de superposición que se activa con un componente de punto de entrada.

En la siguiente tabla, se describen las propiedades disponibles para el componente Modal:

Propiedad Tipo/Valores Descripción
entryPointChild ID del componente ID del componente que activa el diálogo modal (p. ej., un botón)
contentChild ID del componente ID del componente que se mostrará como contenido del diálogo modal.

JSON

{
  "id": "confirmation-modal",
  "component": {
    "Modal": {
      "entryPointChild": "open-modal-btn",
      "contentChild": "modal-content"
    }
  }
}

Pestañas

Un componente Tabs proporciona una interfaz con pestañas para organizar el contenido en paneles intercambiables.

En la siguiente tabla, se describen las propiedades disponibles para el componente Tabs:

Propiedad Tipo/Valores Descripción
tabItems Es un array de objetos. Es la lista de pestañas. Cada elemento debe tener un title y un child (ID de componente).

JSON

{
  "id": "settings-tabs",
  "component": {
    "Tabs": {
      "tabItems": [
        { "title": { "literalString": "General" }, "child": "general-tab" },
        { "title": { "literalString": "Privacy" }, "child": "privacy-tab" }
      ]
    }
  }
}