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.

Componentes del catálogo de Material y componentes básicos del catálogo

La A2UI proporciona dos catálogos de componentes distintos para compilar interfaces de usuario de agentes: el catálogo de Material y el catálogo básico.

El catálogo de Material contiene componentes diseñados específicamente para cumplir con los lineamientos de Material Design de Google, lo que ofrece un conjunto más enriquecido y con más estilo de elementos de IU que se admiten en las configuraciones de A2UI v0.9.

El catálogo básico contiene elementos básicos de la IU estándar y que no dependen del sistema de diseño, como diseños, acciones y entradas, que se admiten en las configuraciones de A2UI v0.9 y v0.8.

Componentes del catálogo de Material

En esta sección, se proporciona una referencia de los componentes de Material Design de A2UI disponibles, incluidos los componentes de diseño, visualización, navegación y entrada.

Propiedades comunes del catálogo de materiales

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 MaterialRow o MaterialColumn para controlar cuánto espacio ocupa el componente en relación con sus elementos secundarios, de manera similar a flex-grow.

Componentes de diseño del catálogo de Material

Los componentes de diseño se usan para estructurar y organizar otros componentes dentro de la interfaz de usuario.

MaterialCard

Contenedor de tarjetas de Material Design.

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

Propiedad Obligatorio Valor predeterminado Descripción
children Sí - Define los IDs de los elementos secundarios.
appearance No raised Es el estilo de apariencia de la tarjeta. Puede ser uno de los siguientes: "outlined" o "raised".
align No start Alineación de los elementos secundarios. Puede ser uno de los siguientes: "center", "end", "start" o "stretch".
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
href No - Es la URL opcional a la que se navegará cuando se haga clic en la tarjeta. Cuando se configura, la tarjeta se vuelve interactiva y abre la URL en una pestaña nueva.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialCard",
    "appearance": "outlined",
    "children": [
      "card-content"
    ]
  },
  {
    "id": "card-content",
    "component": "MaterialText",
    "text": "Card content"
  }
]

MaterialColumn

Contenedor de diseño que organiza elementos de forma vertical según los lineamientos de Material.

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

Propiedad Obligatorio Valor predeterminado Descripción
children Sí - Define los IDs de los elementos secundarios.
justify No start Define la disposición de los elementos secundarios a lo largo del eje principal (verticalmente). Puede ser uno de los siguientes: "start", "center", "end", "spaceBetween", "spaceAround" o "spaceEvenly".
align No stretch Alineación horizontal de los elementos secundarios (“start”, “center”, “end”, “stretch”).
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "demo-column-header",
      "demo-column-content",
      "demo-column-footer"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "demo-column-header",
    "component": "MaterialText",
    "text": "Header",
    "usageHint": "h2"
  },
  {
    "id": "demo-column-content",
    "component": "MaterialText",
    "text": "Content goes here",
    "usageHint": "body"
  },
  {
    "id": "demo-column-footer",
    "component": "MaterialText",
    "text": "Footer",
    "usageHint": "caption"
  }
]

MaterialDialog

Contenedor de diálogo del menú de Material Design.

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

Propiedad Obligatorio Valor predeterminado Descripción
open No false Indica si el diálogo está abierto. Puede ser un literal booleano o una referencia de vinculación de datos.
title No - Es el título del diálogo.
disableClose No false Indica si el usuario puede cerrar el diálogo haciendo clic fuera de él o presionando Escape.
width No - Es el ancho del diálogo (p.ej., "500px").
height No - Es la altura del diálogo (p.ej., "400px").
children Sí - Define los IDs de los elementos secundarios.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "open-button",
      "confirmation-dialog"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "open-button",
    "component": "MaterialButton",
    "label": "Delete Item",
    "variant": "raised",
    "action": {
      "event": {
        "name": "requestDelete"
      }
    }
  },
  {
    "id": "confirmation-dialog",
    "component": "MaterialDialog",
    "open": {
      "path": "/app/dialogOpen"
    },
    "title": "Delete Confirmation",
    "children": [
      "dialog-layout"
    ]
  },
  {
    "id": "dialog-layout",
    "component": "MaterialColumn",
    "children": [
      "dialog-text",
      "dialog-actions"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "dialog-text",
    "component": "MaterialText",
    "text": "Are you sure you want to permanently delete this item?"
  },
  {
    "id": "dialog-actions",
    "component": "MaterialRow",
    "children": [
      "cancel-button",
      "confirm-button"
    ],
    "justify": "end",
    "align": "center"
  },
  {
    "id": "cancel-button",
    "component": "MaterialButton",
    "label": "Cancel",
    "variant": "basic",
    "action": {
      "event": {
        "name": "closeDialog"
      }
    }
  },
  {
    "id": "confirm-button",
    "component": "MaterialButton",
    "label": "Delete",
    "variant": "raised",
    "action": {
      "event": {
        "name": "confirmDelete"
      }
    }
  }
]

MaterialDivider

Línea divisoria de Material Design.

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

Propiedad Obligatorio Valor predeterminado Descripción
inset No false Indica si el divisor está insertado.
vertical No false Indica si el divisor es vertical.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "text-above",
      "divider",
      "text-below"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "text-above",
    "component": "MaterialText",
    "text": "This is the content above the divider."
  },
  {
    "id": "divider",
    "component": "MaterialDivider",
    "inset": false,
    "vertical": false
  },
  {
    "id": "text-below",
    "component": "MaterialText",
    "text": "This is the content below the divider."
  }
]

MaterialExpansionPanel

Es un contenedor del panel de expansión de Material Design.

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

Propiedad Obligatorio Valor predeterminado Descripción
title No - Es el título que se muestra en el encabezado del panel de expansión.
description No - Es la descripción que se muestra en el encabezado del panel de expansión.
expanded No false Indica si el panel está expandido. Puede ser un literal booleano o una referencia de vinculación de datos.
disabled No false Indica si el panel de expansión está inhabilitado.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
children Sí - Define los IDs de los elementos secundarios.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialExpansionPanel",
    "title": "Advanced Options",
    "description": "Configure advanced settings",
    "expanded": false,
    "children": [
      "panel-content"
    ]
  },
  {
    "id": "panel-content",
    "component": "MaterialText",
    "text": "Advanced settings content goes here"
  }
]

MaterialGridList

Es un componente de contenedor de A2UI para el diseño de cuadrícula. Usa la lista de cuadrícula de Angular Material para organizar los componentes secundarios en tarjetas.

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

Propiedad Obligatorio Valor predeterminado Descripción
children Sí - Define los IDs de los elementos secundarios.
cols No 2 Cantidad de columnas en la lista de cuadrícula. Puede ser un número literal o una referencia de vinculación de datos.
rowHeight No 1:1 Es la proporción de altura de la fila o la altura fija (p.ej., "100px"). Puede ser un literal de cadena o una referencia de vinculación de datos.
gutterSize No 1px Es el tamaño del canalón de la cuadrícula. Puede ser un literal de cadena o una referencia de vinculación de datos.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialGridList",
    "cols": 2,
    "rowHeight": "1:1",
    "gutterSize": "8px",
    "children": [
      "card-a",
      "card-b",
      "card-c",
      "card-d"
    ]
  },
  {
    "id": "card-a",
    "component": "MaterialCard",
    "children": [
      "text-a"
    ]
  },
  {
    "id": "text-a",
    "component": "MaterialText",
    "text": "Card A"
  },
  {
    "id": "card-b",
    "component": "MaterialCard",
    "children": [
      "text-b"
    ]
  },
  {
    "id": "text-b",
    "component": "MaterialText",
    "text": "Card B"
  },
  {
    "id": "card-c",
    "component": "MaterialCard",
    "children": [
      "text-c"
    ]
  },
  {
    "id": "text-c",
    "component": "MaterialText",
    "text": "Card C"
  },
  {
    "id": "card-d",
    "component": "MaterialCard",
    "children": [
      "text-d"
    ]
  },
  {
    "id": "text-d",
    "component": "MaterialText",
    "text": "Card D"
  }
]

MaterialRow

Contenedor de diseño que organiza los elementos de forma horizontal según los lineamientos de Material.

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

Propiedad Obligatorio Valor predeterminado Descripción
children Sí - Define los IDs de los elementos secundarios.
justify No start Define la disposición de los elementos secundarios a lo largo del eje principal (horizontalmente). Puede ser uno de los siguientes: "start", "center", "end", "spaceAround", "spaceBetween", "spaceEvenly".
align No stretch Alineación vertical de los elementos secundarios (“start”, “center”, “end”, “stretch”).
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialRow",
    "children": [
      "item-icon",
      "item-details",
      "item-action"
    ],
    "justify": "spaceBetween",
    "align": "center"
  },
  {
    "id": "item-icon",
    "component": "MaterialIcon",
    "icon": "shopping_bag",
    "color": "primary"
  },
  {
    "id": "item-details",
    "component": "MaterialColumn",
    "children": [
      "item-title",
      "item-subtitle"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "item-title",
    "component": "MaterialText",
    "text": "Premium Wireless Headphones",
    "usageHint": "subtitle1"
  },
  {
    "id": "item-subtitle",
    "component": "MaterialText",
    "text": "$299.99 \u2022 Active Noise Cancelling",
    "usageHint": "caption"
  },
  {
    "id": "item-action",
    "component": "MaterialButton",
    "label": "Buy Now",
    "variant": "raised",
    "action": {
      "event": {
        "name": "buy_clicked"
      }
    }
  }
]

Componentes de contenido del catálogo de Material

Los componentes de pantalla y contenido se usan para presentar información, contenido multimedia y estados al usuario.

MaterialBadge

Muestra una insignia de Material Design sobre un elemento secundario.

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

Propiedad Obligatorio Valor predeterminado Descripción
text No - Es el contenido de texto que se mostrará en la insignia.
color No - Paleta de colores de la insignia ("primary", "accent", "warn").
position No above after Posición de la insignia en relación con el contenedor ("above after", "above before", "below after", "below before").
size No medium Tamaño de la insignia (“small”, “medium”, “large”).
overlap No true Indica si la insignia debe superponerse a su contenedor.
disabled No false Indica si la insignia está inhabilitada.
hidden No false Indica si la insignia está oculta.
description No - Es la descripción accesible de la insignia.
children Sí - Define los IDs de los elementos secundarios.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialBadge",
    "text": "42",
    "color": "warn",
    "children": [
      "badge-content"
    ]
  },
  {
    "id": "badge-content",
    "component": "MaterialButton",
    "label": "Notifications"
  }
]

MaterialIcon

Muestra un ícono de Material Design.

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

Propiedad Obligatorio Valor predeterminado Descripción
icon Sí - Nombre del ícono de Material que se mostrará.
color No - Paleta de colores del ícono (principal, de énfasis, de advertencia).
tooltip No - Es el texto opcional de la información sobre la herramienta que se muestra cuando se coloca el cursor sobre el elemento o cuando se enfoca.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

Componente de A2UI para renderizar una imagen en un contexto de Material Design. Admite esquinas redondeadas, relación de aspecto y propiedades de object-fit.

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

Propiedad Obligatorio Valor predeterminado Descripción
url Sí - Es la URL de la imagen que se mostrará.
alt No - Texto alternativo accesible para la imagen.
fit No - Especifica cómo se debe cambiar el tamaño de la imagen para que se ajuste a su contenedor. Puede ser uno de los siguientes: "fill", "contain", "cover", "scaleDown" o "none".
width No - Ancho personalizado de la imagen (p.ej., "100px", "100%").
height No - Altura personalizada de la imagen (p.ej., "100px", "100%").
aspectRatio No - Relación de aspecto personalizada de la imagen (p.ej., "16/9", "1").
roundedCorners No false Indica si se deben aplicar las esquinas redondeadas estándar de Material Design.
borderRadius No - Radio de borde personalizado de la imagen (p.ej., "50%", "12px"). Anula roundedCorners.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialImage",
    "url": "https://www.gstatic.com/marketing-cms/assets/images/c5/3a/200414104c669203c62270f7884f/google-wordmarks-2x.webp=n-w100-h32-fcrop64=1,00000000ffffffff-rw",
    "width": "100px",
    "height": "32px",
    "fit": "scaleDown",
    "roundedCorners": true,
    "alt": "Google Wordmark"
  }
]

MaterialProgressBar

Es un wrapper de A2UI para el componente de barra de progreso de Angular Material. Admite los modos determinado, indeterminado, de búfer y de consulta.

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

Propiedad Obligatorio Valor predeterminado Descripción
value No 0 Es el valor de progreso (de 0 a 100) en los modos determinado y de búfer.
mode No determinate Es el modo de la barra de progreso. Puede ser uno de los siguientes: "determinate", "indeterminate", "buffer" o "query".
bufferValue No 0 Valor del búfer (de 0 a 100) en el modo de búfer.
color No - Paleta de colores de la barra de progreso ("primary", "accent", "warn").
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

Es un wrapper de A2UI para el componente Progress Spinner de Angular Material. Admite modos determinísticos e indeterminísticos, y dimensiones personalizadas.

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

Propiedad Obligatorio Valor predeterminado Descripción
value No 0 Es el valor de progreso (de 0 a 100) en el modo determinado.
mode No determinate Es el modo del selector. Puede ser "determinate" o "indeterminate".
diameter No 40 Diámetro del ícono de carga en píxeles.
strokeWidth No 4 Es el ancho del trazo del spinner en píxeles.
color No - Paleta de colores del spinner ("primary", "accent", "warn").
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialProgressSpinner",
    "mode": "indeterminate",
    "diameter": 40,
    "strokeWidth": 4,
    "color": "accent",
    "ariaLabel": "Loading data"
  }
]

MaterialTable

Wrapper de A2UI para el componente de tabla de Angular Material. Renderiza datos estructurados en columnas y filas.

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

Propiedad Obligatorio Valor predeterminado Descripción
columns Sí - Es un array de definiciones de columnas, en el que cada una especifica un objeto {header, field}.
rows Sí - Es la lista de filas de datos. Puede ser un array de registros par clave-valor o una referencia de vinculación de datos.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
caption No - Es una leyenda o descripción accesible para la tabla.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

Muestra texto con la tipografía de Material.

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

Propiedad Obligatorio Valor predeterminado Descripción
text Sí - Es el texto que se mostrará. Puede ser una cadena literal o una referencia a un valor en el modelo de datos.
usageHint No body Es una sugerencia para el estilo de tipografía. Puede ser uno de los siguientes: "h1", "h2", "h3", "h4", "h5", "subtitle1", "subtitle2", "body1", "body2", "body", "caption".
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

Componentes de navegación del catálogo de Material

Los componentes de navegación y acción permiten a los usuarios realizar acciones o navegar entre vistas.

MaterialButton

Botón de Material Design.

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

Propiedad Obligatorio Valor predeterminado Descripción
label No - Es la etiqueta de texto que se mostrará en el botón.
leadingIcon No - Nombre del ícono de Material que se mostrará antes de la etiqueta.
trailingIcon No - Nombre del ícono de Material que se mostrará después de la etiqueta.
variant No basic Es la variante de estilo del botón. Puede ser uno de los siguientes: "raised", "flat", "stroked", "icon", "fab", "mini-fab" o "basic".
appearance No - Es la apariencia visual del botón. Puede ser uno de los siguientes: "text", "filled", "elevated", "outlined" o "tonal".
disabled No false Indica si el botón está inhabilitado.
action No - Es la acción que se enviará cuando se haga clic en el botón.
tooltip No - Es el texto de la información sobre la herramienta que se mostrará cuando se coloque el cursor sobre el elemento.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
disableRipple No false Indica si el efecto de ondulación al hacer clic está inhabilitado.
extended No false Indica si el botón se extiende con espacio adicional para la etiqueta o el ícono.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

Es un botón de ícono de Material Design.

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

Propiedad Obligatorio Valor predeterminado Descripción
icon Sí - Nombre del ícono de Material que se mostrará.
action Sí - Es la acción del cliente que se enviará cuando se haga clic en el botón de ícono.
ariaLabel Sí - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad, ya que el botón solo contiene un ícono.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
color No - Paleta de colores del botón (principal, de énfasis, de advertencia).
disabled No false Indica si el botón está inhabilitado.
tooltip No - Es el texto de la información sobre la herramienta que se mostrará cuando se coloque el cursor sobre el elemento.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

Wrapper de A2UI para el componente Menu de Angular Material. Proporciona un botón de activación y elementos de menú desplegable.

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

Propiedad Obligatorio Valor predeterminado Descripción
label No - Es la etiqueta de texto que se muestra en el botón de activación del menú.
icon No - Nombre del ícono de Material que se mostrará en el botón de activación.
disabled No false Indica si el botón de activación del menú está inhabilitado.
value No - Es el valor seleccionado actualmente. Puede ser un literal de cadena o una referencia de vinculación de datos.
options Sí - Es la lista de opciones de menú disponibles. Puede ser un array de objetos {label, value} o una referencia de vinculación de datos.
action No - Es la acción del cliente que se enviará cuando se seleccione un elemento del menú.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialMenu",
    "label": "Options",
    "icon": "more_vert",
    "value": {
      "path": "/menu/selectedOption"
    },
    "options": [
      {
        "label": "Settings",
        "value": "settings"
      },
      {
        "label": "Help",
        "value": "help"
      },
      {
        "label": "Logout",
        "value": "logout"
      }
    ],
    "action": {
      "event": {
        "name": "menuSelection"
      }
    }
  }
]

MaterialTabs

Wrapper de A2UI para el componente de pestañas de Angular Material. Renderiza la navegación con pestañas y administra la selección de la pestaña activa.

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

Propiedad Obligatorio Valor predeterminado Descripción
tabs Sí - Es un array de definiciones de pestañas, en el que cada una especifica un objeto {label, content}.
activeTab No 0 Índice basado en 0 de la pestaña activa actualmente. Puede ser un número literal o una referencia de vinculación de datos.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialTabs",
    "activeTab": {
      "path": "/app/selectedTab"
    },
    "tabs": [
      {
        "label": "Overview",
        "content": "Overview content"
      },
      {
        "label": "Details",
        "content": "Details content"
      },
      {
        "label": "Reviews",
        "content": "Reviews content"
      }
    ]
  }
]

Componentes de entrada del catálogo de Material

Los componentes de entrada y formulario permiten que los usuarios ingresen texto, realicen selecciones y activen o desactiven opciones.

MaterialButtonToggle

Grupo de botones de activación de Material Design para una sola selección.

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

Propiedad Obligatorio Valor predeterminado Descripción
value No - Es el valor seleccionado actualmente. Puede ser una cadena literal o una referencia a un valor en el modelo de datos.
options Sí - Es la lista de opciones disponibles para la selección. Puede ser un array de objetos {label, value} o una referencia de vinculación de datos.
disabled No false Indica si el grupo de botones para activar o desactivar está inhabilitado.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
appearance No standard Es el estilo de apariencia del grupo de botones para activar o desactivar. Puede ser "legacy" o "standard".
vertical No false Indica si el grupo de botones para activar o desactivar está dispuesto verticalmente.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialButtonToggle",
    "ariaLabel": "Text alignment",
    "value": {
      "path": "/user/alignment"
    },
    "options": [
      {
        "label": "Left",
        "value": "left"
      },
      {
        "label": "Center",
        "value": "center"
      },
      {
        "label": "Right",
        "value": "right"
      }
    ]
  }
]

MaterialCheckbox

Componente de casilla de verificación de Material Design para el estado booleano. Para una accesibilidad óptima, proporciona una etiqueta descriptiva o usa ariaLabel para las tecnologías de asistencia.

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

Propiedad Obligatorio Valor predeterminado Descripción
label No - Es la etiqueta de texto que se muestra junto a la casilla de verificación.
checked No false Indica si la casilla de verificación está marcada. Puede ser un valor booleano literal o una referencia a un valor en el modelo de datos.
disabled No false Indica si la casilla de verificación está inhabilitada.
color No - Paleta de colores de la casilla de verificación ("primary", "accent", "warn").
labelPosition No after Posición de la etiqueta en relación con la casilla de verificación (“before”, “after”).
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
tooltip No - Es el texto de la información sobre la herramienta que se mostrará cuando se coloque el cursor sobre el elemento.
checks No - Es un array de reglas de validación (cada una contiene una condición booleana dinámica y un mensaje de error) que se evalúan de forma reactiva para determinar la validez de la entrada.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Es el peso del diseño del elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialCheckbox",
    "label": "Agree to Terms and Conditions",
    "ariaLabel": "Agree to Terms and Conditions",
    "checked": {
      "path": "/user/agreedToTerms"
    },
    "color": "primary"
  }
]

MaterialChips

Componente de lista de chips de Material Design para la selección única.

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

Propiedad Obligatorio Valor predeterminado Descripción
value No - Es el valor seleccionado actualmente. Puede ser una cadena literal o una referencia a un valor en el modelo de datos.
options Sí - Es la lista de opciones de chips. Puede ser un array de objetos {label, value} o una referencia de vinculación de datos.
disabled No false Indica si el cuadro de lista de chips está inhabilitado.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
action No - Acción que se despacha cuando se selecciona un chip.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialChips",
    "ariaLabel": "Filter by status",
    "value": {
      "path": "/user/status"
    },
    "options": [
      {
        "label": "All",
        "value": "all"
      },
      {
        "label": "Active",
        "value": "active"
      },
      {
        "label": "Completed",
        "value": "completed"
      }
    ]
  }
]

MaterialDatepicker

Es el componente selector de fecha de Material Design.

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

Propiedad Obligatorio Valor predeterminado Descripción
label No - Es la etiqueta del campo del selector de fecha.
placeholder No - Es el texto del marcador de posición.
value No - Es la fecha seleccionada actual en formato ISO.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
disabled No false Indica si el selector de fecha está inhabilitado.
checks No - Es un array de reglas de validación (cada una contiene una condición booleana dinámica y un mensaje de error) que se evalúan de forma reactiva para determinar la validez de la entrada.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialDatepicker",
    "label": "Appointment Date",
    "placeholder": "Choose a date",
    "ariaLabel": "Appointment Date",
    "value": {
      "path": "/appointment/date"
    }
  }
]

MaterialInput

Es un campo de entrada de texto de Material Design.

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

Propiedad Obligatorio Valor predeterminado Descripción
label No - Es la etiqueta del campo de entrada.
placeholder No - Es el texto del marcador de posición.
value No - Es el valor actual de la entrada. Puede ser una cadena literal o una referencia a un valor en el modelo de datos.
disabled No false Indica si la entrada está inhabilitada.
name No - Es el nombre del elemento de entrada.
readonly No false Indica si la entrada es de solo lectura.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
type No text Es el tipo de control de entrada que se mostrará. Puede ser uno de los siguientes: "text", "number", "email", "tel" o "date". No se permite "contraseña".
validationRegexp No - Expresión regular para la validación de entrada.
checks No - Es un array de reglas de validación (cada una contiene una condición booleana dinámica y un mensaje de error) que se evalúan de forma reactiva para determinar la validez de la entrada.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Es el peso del diseño del elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

Wrapper de A2UI para el componente de botón de selección de Angular Material. Admite la selección única de una lista de opciones dentro de un grupo de botones de selección.

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

Propiedad Obligatorio Valor predeterminado Descripción
value No - Es el valor seleccionado actualmente. Puede ser un literal de cadena o una referencia de vinculación de datos.
options Sí - Es la lista de opciones de radio disponibles. Puede ser un array de objetos {label, value} o una referencia de vinculación de datos.
disabled No false Indica si el grupo de botones de radio está inhabilitado.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
color No - Paleta de colores del botón de opción ("primary", "accent", "warn").
labelPosition No after Posición de la etiqueta en relación con el botón de selección. Puede ser "before" o "after".
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialRadioButton",
    "ariaLabel": "Delivery options",
    "value": {
      "path": "/order/deliverySpeed"
    },
    "options": [
      {
        "label": "Standard",
        "value": "standard"
      },
      {
        "label": "Express",
        "value": "express"
      },
      {
        "label": "Next Day",
        "value": "nextDay"
      }
    ],
    "color": "primary",
    "labelPosition": "after"
  }
]

MaterialSelect

Componente de selección de Material Design (menú desplegable) para una sola selección. Para una accesibilidad óptima, siempre proporciona una etiqueta descriptiva o usa aria-label para las tecnologías de asistencia.

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

Propiedad Obligatorio Valor predeterminado Descripción
label No - Es la etiqueta del campo de selección.
placeholder No - Es el texto de marcador de posición que se muestra cuando no se selecciona ningún valor.
value No - Es el valor seleccionado actual. Puede ser una cadena literal o una referencia a un valor en el modelo de datos.
options Sí - Es la lista de opciones disponibles para la selección. Puede ser un array de objetos {label, value} o una referencia de vinculación de datos.
disabled No false Indica si el componente de selección está inhabilitado.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
checks No - Es un array de reglas de validación (cada una contiene una condición booleana dinámica y un mensaje de error) que se evalúan de forma reactiva para determinar la validez de la entrada.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialSelect",
    "label": "Favorite Color",
    "placeholder": "Choose a color",
    "ariaLabel": "Select your favorite color",
    "value": {
      "path": "/user/favoriteColor"
    },
    "options": [
      {
        "label": "Red",
        "value": "red"
      },
      {
        "label": "Green",
        "value": "green"
      },
      {
        "label": "Blue",
        "value": "blue"
      }
    ]
  }
]

MaterialSlideToggle

Es un wrapper de A2UI para el componente Slide Toggle de Angular Material. Admite vinculaciones de activación booleanas y atributos de accesibilidad personalizados.

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

Propiedad Obligatorio Valor predeterminado Descripción
label No - Es la etiqueta de texto que se muestra junto al botón de activación.
checked No false Indica si el botón de activación está marcado. Puede ser un literal booleano o una referencia de vinculación de datos.
disabled No false Indica si el botón de activación está inhabilitado.
required No false Indica si el botón de activación es obligatorio.
color No - Paleta de colores del botón de activación ("primary", "accent", "warn").
labelPosition No after Posición de la etiqueta en relación con el botón de activación (“before”, “after”).
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
tooltip No - Es el texto de la información sobre la herramienta que se mostrará cuando se coloque el cursor sobre el elemento.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

Es un wrapper de A2UI para el componente Slider de Angular Material. Admite la selección de valores numéricos y las restricciones de rango.

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

Propiedad Obligatorio Valor predeterminado Descripción
value No 0 Es el valor actual del control deslizante. Puede ser un número literal o una referencia de vinculación de datos.
min No 0 Es el valor mínimo del control deslizante.
max No 100 Es el valor máximo del control deslizante.
step No 1 Es el incremento de pasos del control deslizante.
disabled No false Indica si el control deslizante está inhabilitado.
color No - Paleta de colores del control deslizante ("primary", "accent", "warn").
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialSlider",
    "min": 0,
    "max": 100,
    "step": 5,
    "value": {
      "path": "/audio/volume"
    },
    "color": "primary",
    "ariaLabel": "Volume adjustment"
  }
]

MaterialTimepicker

Es un wrapper de A2UI para el componente Timepicker de Angular Material. Admite la selección de hora y la integración de campos de formulario.

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

Propiedad Obligatorio Valor predeterminado Descripción
label No - Es la etiqueta de texto del campo del selector de fecha y hora.
placeholder No - Es el texto del marcador de posición.
value No - Es la hora seleccionada actual en formato ISO. Puede ser un literal de cadena o una referencia de vinculación de datos.
ariaLabel No - Texto discernible para los lectores de pantalla. Se recomienda para la accesibilidad cuando no hay una etiqueta visible.
ariaLabelledby No - Identifica el elemento (o los elementos) que etiquetan el elemento actual. Se usa para la accesibilidad.
ariaDescribedby No - Identifica el elemento (o los elementos) que describe el elemento actual. Se usa para la accesibilidad.
disabled No false Indica si el selector de hora está inhabilitado.
checks No - Es un array de reglas de validación (cada una contiene una condición booleana dinámica y un mensaje de error) que se evalúan de forma reactiva para determinar la validez de la entrada.
style No - Son los estilos intercalados que se aplicarán al elemento.
weight No - Peso del diseño para el elemento cuando se coloca en un contenedor flexible. 
[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

Componentes básicos del catálogo

En esta sección, se proporciona una referencia de los componentes básicos del catálogo de la A2UI disponibles.

Archivos de esquema de catálogo básicos

Para obtener más información sobre estas propiedades, consulta los siguientes recursos:

Propiedades comunes básicas del catálogo

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.

Componentes básicos de diseño del catálogo

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 justify/distribution y align/alignment.

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

Propiedad Tipo/Valores Descripción
children v0.9: Es un array de IDs de componentes o una definición de plantilla.
v0.8: explicitList o template 		Son los componentes secundarios que se organizarán horizontalmente dentro de Row.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Controla cómo se distribuyen los componentes secundarios a lo largo del eje horizontal.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Controla cómo se alinean los componentes secundarios en el eje vertical.

JSON de la versión 0.9

{
  "id": "toolbar",
  "component": "Row",
  "children": ["btn1", "btn2", "btn3"],
  "justify": "spaceBetween",
  "align": "center"
}

JSON de la versión 0.8

{
  "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 justify/distribution y align/alignment.

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

Propiedad Tipo/Valores Descripción
children v0.9: Es un array de IDs de componentes o una definición de plantilla.
v0.8: explicitList o template 		Son los componentes secundarios que se organizarán verticalmente dentro de la columna.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Controla cómo se distribuyen los componentes secundarios a lo largo del eje vertical.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Controla cómo se alinean los componentes secundarios en el eje horizontal.

JSON de la versión 0.9

{
  "id": "content",
  "component": "Column",
  "children": ["header", "body", "footer"],
  "justify": "start",
  "align": "stretch"
}

v0.8, 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 v0.9: Es un array de IDs de componentes o una definición de plantilla.
v0.8: 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.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Controla cómo se alinean los elementos de la lista en el eje transversal.

JSON de la versión 0.9

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

v0.8, JSON

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

Componentes básicos de visualización del catálogo

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 v0.9: Cadena o DataBinding
v0.8: BoundValue 		Es el contenido de texto que se mostrará.
variant (v0.9)
usageHint (v0.8) 		h1, h2, h3, h4, h5, caption, body Es una sugerencia de diseño para el texto.

JSON de la versión 0.9

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

v0.8, 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 v0.9: Cadena o DataBinding
v0.8: BoundValue 		Es la URL de la imagen que se mostrará.
fit String Cómo debe ajustarse la imagen a su contenedor (p.ej., "cover").
variant (v0.9)
usageHint (v0.8) 		String Es una sugerencia para las variantes de uso o diseño (p.ej., "héroe").

JSON de la versión 0.9

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

v0.8, 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 v0.9: Cadena o DataBinding
v0.8: BoundValue 		Es el nombre del ícono que se mostrará (p.ej., "check").

JSON de la versión 0.9

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

v0.8, 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 de v0.9

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

JSON de la versión 0.8

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

Componentes interactivos básicos del catálogo

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).
variant (v0.9)
primary (v0.8) 		v0.9: Cadena (p.ej., "primary")
v0.8: Booleano 		Es el tipo de diseño o énfasis que se aplica al botón.
action v0.9: Objeto de evento (p.ej., clave `event`)
v0.8: Objeto de acción (p.ej., clave `name`) 		Es la acción que se activará cuando se haga clic en el botón.

JSON de la versión 0.9

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

v0.8, 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 v0.9: String
v0.8: BoundValue 		Es la etiqueta del campo de texto.
value (v0.9)
text (v0.8) 		v0.9: Cadena o DataBinding
v0.8: 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 de la versión 0.9

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

v0.8, 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 v0.9: String
v0.8: BoundValue 		Es la etiqueta de la casilla de verificación.
value v0.9: DataBinding (booleano)
v0.8: BoundValue (booleano) 		El valor de la casilla de verificación (verdadero/falso) o la ruta de acceso vinculada.

JSON de la versión 0.9

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

v0.8, 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 v0.9: DataBinding (número)
v0.8: 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 de la versión 0.9

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

v0.8, 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 v0.9: DataBinding
v0.8: 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 de v0.9

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

v0.8, JSON

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

ChoicePicker (v0.9) y MultipleChoice (v0.8)

Seleccionar una o más opciones de una lista Ten en cuenta que se cambió el nombre de este componente a ChoicePicker en la versión 0.9, mientras que en la versión 0.8 se llamaba MultipleChoice.

En la siguiente tabla, se describen las propiedades disponibles:

Propiedad Tipo/Valores Descripción
options Array de objetos Es la lista de opciones que puede seleccionar el usuario. Cada opción debe tener una etiqueta (cadena en la versión 0.9 y BoundValue en la versión 0.8) y un valor.
selections v0.9: DataBinding
v0.8: BoundValue 		Son los valores seleccionados o la ruta de vinculación.
maxAllowedSelections Número Es la cantidad máxima de selecciones permitidas.

JSON de la versión 0.9

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

JSON de la versión 0.8

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

Componentes básicos del contenedor del catálogo

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 de la versión 0.9

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

v0.8, 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 de la versión 0.9

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

v0.8, 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 Array de objetos Es la lista de pestañas. Cada elemento debe tener un title (cadena en la versión 0.9, BoundValue en la versión 0.8) y un child (ID de componente).

JSON de v0.9

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

v0.8, JSON

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

Resumen de las diferencias entre versiones

Los nombres y las propiedades de los componentes son prácticamente los mismos en todas las versiones. Las diferencias estructurales son las siguientes:

Aspecto v0.8 v0.9
Wrapper del componente "component": { "Text": { ... } } "component": "Text", ...props
Valores de string { "literalString": "Hello" } "Hello"
Secundario { "explicitList": ["a", "b"] } ["a", "b"]
Vinculación de datos { "path": "/data" } { "path": "/data" } (igual)
Aplicación de estilo a texto/imágenes usageHint variant
Diseño de botones primary: true variant: "primary"
Formato de acción { "name": "..." } { "event": { "name": "..." } }
Componente de opción MultipleChoice ChoicePicker
Alineación del diseño distribution, alignment justify, align
Valor de TextField text value

Guía de evolución

Para obtener información sobre cómo pasar de la versión 0.8 a la 0.9, consulta la Guía de evolución de la versión 0.8 a la 0.9.

Ejemplos en vivo

Para ver todos los componentes en acción, haz lo siguiente:

cd samples/client/angular
yarn start gallery

¿Qué sigue?