Documentation de référence sur la galerie de composants A2UI

Cette page fournit une documentation de référence complète pour tous les composants A2UI disponibles, y compris les composants de mise en page, d'affichage, interactifs et de conteneur, ainsi que les propriétés courantes.

Composants du catalogue Material et composants de base du catalogue

A2UI fournit deux catalogues de composants distincts pour créer des interfaces utilisateur d'agent : le catalogue Material et le catalogue Basic.

Le catalogue Material contient des composants spécialement conçus pour respecter les consignes Google Material Design. Il offre un ensemble d'éléments d'UI plus riche et plus stylisé, compatibles avec les configurations A2UI v0.9.

Le catalogue de base contient des primitives d'UI standards et indépendantes du système de conception, telles que des mises en page, des actions et des entrées, compatibles avec les configurations A2UI v0.9 et v0.8.

Composants du catalogue Material

Cette section fournit une référence pour les composants Material Design A2UI disponibles, y compris les composants de mise en page, d'affichage, de navigation et d'entrée.

Propriétés communes du catalogue de matériaux

Tous les composants, quel que soit leur type spécifique, partagent un ensemble de propriétés communes qui peuvent être configurées :

Propriété Requis Description
id Oui Identifiant unique du composant sur la surface actuelle.
accessibility Non Attributs permettant d'améliorer l'accessibilité, tels que les libellés et les rôles.
weight Non Valeur utilisée dans les mises en page MaterialRow ou MaterialColumn pour contrôler l'espace occupé par le composant par rapport à ses frères et sœurs, de la même manière que flex-grow.

Composants de mise en page du catalogue Material

Les composants de mise en page permettent de structurer et d'organiser d'autres composants dans l'interface utilisateur.

MaterialCard

Conteneur de carte Material Design.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialCard :

Propriété Obligatoire Valeur par défaut Description
children Oui - Définit les ID des enfants.
appearance Non raised Style d'apparence de la carte. Au choix : "outlined" ou "raised".
align Non start Alignement des enfants. Les valeurs possibles sont les suivantes : "center", "end", "start" et "stretch".
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
href Non - URL facultative vers laquelle accéder lorsque l'utilisateur clique sur la fiche. Lorsque cette option est activée, la fiche devient interactive et ouvre l'URL dans un nouvel onglet.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialCard",
    "appearance": "outlined",
    "children": [
      "card-content"
    ]
  },
  {
    "id": "card-content",
    "component": "MaterialText",
    "text": "Card content"
  }
]

MaterialColumn

Conteneur de mise en page qui organise les éléments verticalement à l'aide des consignes Material.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialColumn :

Propriété Obligatoire Valeur par défaut Description
children Oui - Définit les ID des enfants.
justify Non start Définit la disposition des enfants le long de l'axe principal (verticalement).
align Non stretch Alignement horizontal des enfants ("start", "center", "end", "stretch").
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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

Conteneur de boîte de dialogue du menu Material Design.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialDialog :

Propriété Obligatoire Valeur par défaut Description
open Non false Indique si la boîte de dialogue est ouverte. Il peut s'agir d'un littéral booléen ou d'une référence de liaison de données.
title Non - Titre de la boîte de dialogue.
disableClose Non false Indique si l'utilisateur peut fermer la boîte de dialogue en cliquant en dehors ou en appuyant sur Échap.
width Non - Largeur de la boîte de dialogue (par exemple, "500px").
height Non - Hauteur de la boîte de dialogue (par exemple, "400px").
children Oui - Définit les ID des enfants.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "open-button",
      "confirmation-dialog"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "open-button",
    "component": "MaterialButton",
    "label": "Delete Item",
    "variant": "raised",
    "color": "warn",
    "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",
    "color": "warn",
    "action": {
      "event": {
        "name": "confirmDelete"
      }
    }
  }
]

MaterialDivider

Ligne de séparation Material Design.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialDivider :

Propriété Obligatoire Valeur par défaut Description
inset Non false Indique si le séparateur est en retrait.
vertical Non false Indique si le séparateur est vertical.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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

Conteneur du panneau de développement Material Design.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialExpansionPanel :

Propriété Obligatoire Valeur par défaut Description
title Non - Titre affiché dans l'en-tête du panneau de développement.
description Non - Description affichée dans l'en-tête du panneau de développement.
expanded Non false Indique si le panneau est développé. Il peut s'agir d'un littéral booléen ou d'une référence de liaison de données.
disabled Non false Indique si le panneau de développement est désactivé.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
children Oui - Définit les ID des enfants.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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

Composant de conteneur A2UI pour la mise en page en grille. Utilise la liste de grille Angular Material pour organiser les composants enfants en mosaïques.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialGridList :

Propriété Obligatoire Valeur par défaut Description
children Oui - Définit les ID des enfants.
cols Non 2 Nombre de colonnes dans la liste en grille. Il peut s'agir d'un nombre littéral ou d'une référence de liaison de données.
rowHeight Non 1:1 Ratio de hauteur de ligne ou hauteur fixe (par exemple, "100px"). Il peut s'agir d'une chaîne littérale ou d'une référence de liaison de données.
gutterSize Non 1px Taille de la gouttière de la grille. Il peut s'agir d'une chaîne littérale ou d'une référence de liaison de données.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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

Conteneur de mise en page qui organise les éléments horizontalement à l'aide des consignes Material.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialRow :

Propriété Obligatoire Valeur par défaut Description
children Oui - Définit les ID des enfants.
justify Non start Définit l'arrangement des enfants le long de l'axe principal (horizontalement).
align Non stretch Alignement vertical des enfants ("start", "center", "end", "stretch").
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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"
      }
    }
  }
]

Composants du contenu du catalogue Material

Les composants d'affichage et de contenu sont utilisés pour présenter des informations, des contenus multimédias et des états à l'utilisateur.

MaterialBadge

Affiche un badge Material Design sur un élément enfant.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialBadge :

Propriété Obligatoire Valeur par défaut Description
text Non - Contenu textuel à afficher dans le badge.
color Non - Palette de couleurs du badge ("primary", "accent", "warn").
position Non above after Position du badge par rapport au conteneur ("above after", "above before", "below after", "below before").
size Non medium Taille du badge ("small", "medium" ou "large").
overlap Non true Indique si le badge doit chevaucher son conteneur.
disabled Non false Indique si le badge est désactivé.
hidden Non false Indique si le badge est masqué.
description Non - Description accessible du badge.
children Oui - Définit les ID des enfants.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialBadge",
    "text": "42",
    "color": "warn",
    "children": [
      "badge-content"
    ]
  },
  {
    "id": "badge-content",
    "component": "MaterialButton",
    "label": "Notifications"
  }
]

MaterialIcon

Affiche une icône Material Design.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialIcon :

Propriété Obligatoire Valeur par défaut Description
icon Oui - Nom de l'icône Material à afficher.
color Non - Palette de couleurs de l'icône (primaire, accentuée, avertissement).
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

Composant A2UI permettant d'afficher une image dans un contexte Material Design. Compatible avec les propriétés "border-radius", "aspect-ratio" et "object-fit".

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialImage :

Propriété Obligatoire Valeur par défaut Description
url Oui - URL de l'image à afficher.
alt Non - Texte alternatif accessible pour l'image.
fit Non - Indique comment l'image doit être redimensionnée pour s'adapter à son conteneur. Les valeurs possibles sont les suivantes : "fill", "contain", "cover", "scaleDown" et "none".
width Non - Largeur personnalisée de l'image (par exemple, "100px" ou "100%").
height Non - Hauteur personnalisée de l'image (par exemple, "100px" ou "100%").
aspectRatio Non - Format personnalisé de l'image (par exemple, "16/9", "1").
roundedCorners Non false Indique si les angles arrondis standards de Material Design doivent être appliqués.
borderRadius Non - Rayon de bordure personnalisé de l'image (par exemple, "50%", "12px"). Remplace roundedCorners.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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

Wrapper A2UI pour le composant Angular Material Progress Bar. Compatible avec les modes déterminé, indéterminé, tampon et requête.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialProgressBar :

Propriété Obligatoire Valeur par défaut Description
value Non 0 Valeur de progression (de 0 à 100) en mode déterminé et en mode tampon.
mode Non determinate Mode de la barre de progression. Au choix : "determinate", "indeterminate", "buffer" ou "query".
bufferValue Non 0 Valeur du tampon (de 0 à 100) en mode tampon.
color Non - Palette de couleurs de la barre de progression ("primary", "accent", "warn").
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

Wrapper A2UI pour le composant Angular Material Progress Spinner. Compatible avec les modes déterminé et indéterminé, et avec les dimensions personnalisées.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialProgressSpinner :

Propriété Obligatoire Valeur par défaut Description
value Non 0 Valeur de progression (de 0 à 100) en mode déterminé.
mode Non determinate Mode du sélecteur. Au choix : "determinate" ou "indeterminate".
diameter Non 40 Diamètre du sélecteur de progression en pixels.
strokeWidth Non 4 Largeur du trait du sélecteur en pixels.
color Non - Palette de couleurs du sélecteur ("primary", "accent", "warn").
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialProgressSpinner",
    "mode": "indeterminate",
    "diameter": 40,
    "strokeWidth": 4,
    "color": "accent",
    "ariaLabel": "Loading data"
  }
]

MaterialTable

Wrapper A2UI pour le composant Angular Material Table. Affiche les données structurées en colonnes et en lignes.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialTable :

Propriété Obligatoire Valeur par défaut Description
columns Oui - Tableau de définitions de colonnes, chacune spécifiant un objet {header, field}.
rows Oui - Liste des lignes de données. Peut être un tableau d'enregistrements clé-valeur ou une référence de liaison de données.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
caption Non - Légende/description accessible pour le tableau.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

Affiche du texte avec la typographie Material.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialText :

Propriété Obligatoire Valeur par défaut Description
text Oui - Texte à afficher. Il peut s'agir d'une chaîne littérale ou d'une référence à une valeur dans le modèle de données.
usageHint Non body Indication pour le style typographique. Il peut correspondre à "h1", "h2", "h3", "h4", "h5", "subtitle1", "subtitle2", "body1", "body2", "body" ou "caption".
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

Composants de navigation du catalogue Material

Les composants d'action et de navigation permettent aux utilisateurs d'effectuer des actions ou de naviguer entre les vues.

MaterialButton

Bouton Material Design.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialButton :

Propriété Obligatoire Valeur par défaut Description
label Non - Libellé à afficher sur le bouton.
leadingIcon Non - Nom de l'icône Material à afficher avant le libellé.
trailingIcon Non - Nom de l'icône Material à afficher après le libellé.
color Non - Palette de couleurs du bouton (primaire, accentuation, avertissement).
variant Non basic Variante de style du bouton. Au choix : "raised", "flat", "stroked" ou "basic".
disabled Non false Indique si le bouton est désactivé.
action Non - Action côté client à distribuer lorsque l'utilisateur clique sur le bouton.
tooltip Non - Texte de l'info-bulle à afficher au passage de la souris.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

Bouton d'icône Material Design.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialIconButton :

Propriété Obligatoire Valeur par défaut Description
icon Oui - Nom de l'icône Material à afficher.
action Oui - Action côté client à distribuer lorsque l'utilisateur clique sur le bouton d'icône.
ariaLabel Oui - Texte discernable pour les lecteurs d'écran. Obligatoire pour l'accessibilité.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
color Non - Palette de couleurs du bouton (primaire, accentuation, avertissement).
disabled Non false Indique si le bouton est désactivé.
tooltip Non - Texte de l'info-bulle à afficher au passage de la souris.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

Wrapper A2UI pour le composant Angular Material Menu. Fournit un bouton de déclenchement et des éléments de menu déroulant.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialMenu :

Propriété Obligatoire Valeur par défaut Description
label Non - Libellé affiché sur le bouton de déclenchement du menu.
icon Non - Nom de l'icône Material à afficher sur le bouton de déclencheur.
disabled Non false Indique si le bouton de déclenchement du menu est désactivé.
value Non - Valeur actuellement sélectionnée. Il peut s'agir d'une chaîne littérale ou d'une référence de liaison de données.
options Oui - Liste des options de menu disponibles. Il peut s'agir d'un tableau d'objets {label, value} ou d'une référence de liaison de données.
action Non - Action côté client à distribuer lorsqu'un élément de menu est sélectionné.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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 A2UI pour le composant Angular Material Tabs. Affiche la navigation par onglets et gère la sélection de l'onglet actif.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialTabs :

Propriété Obligatoire Valeur par défaut Description
tabs Oui - Tableau de définitions d'onglets, chacun spécifiant un objet {label, content}.
activeTab Non 0 Index (basé sur 0) de l'onglet actuellement actif. Il peut s'agir d'un nombre littéral ou d'une référence de liaison de données.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialTabs",
    "activeTab": {
      "path": "/app/selectedTab"
    },
    "tabs": [
      {
        "label": "Overview",
        "content": "Overview content"
      },
      {
        "label": "Details",
        "content": "Details content"
      },
      {
        "label": "Reviews",
        "content": "Reviews content"
      }
    ]
  }
]

Composants d'entrée du catalogue Material

Les composants de saisie et de formulaire permettent aux utilisateurs de saisir du texte, de faire des sélections et d'activer/désactiver des options.

MaterialButtonToggle

Groupe de boutons d'activation Material Design pour la sélection unique.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialButtonToggle :

Propriété Obligatoire Valeur par défaut Description
value Non - Valeur actuellement sélectionnée. Il peut s'agir d'une chaîne littérale ou d'une référence à une valeur dans le modèle de données.
options Oui - Liste des options disponibles. Il peut s'agir d'un tableau d'objets {label, value} ou d'une référence de liaison de données.
disabled Non false Indique si le groupe de boutons d'activation est désactivé.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
appearance Non standard Style d'apparence du groupe de boutons d'activation. Au choix : "legacy" ou "standard".
vertical Non false Indique si le groupe de boutons d'activation est organisé verticalement.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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

Composant de case à cocher Material Design pour l'état booléen. Pour une accessibilité optimale, fournissez un libellé descriptif ou utilisez ariaLabel pour les technologies d'assistance.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialCheckbox :

Propriété Obligatoire Valeur par défaut Description
label Non - Libellé de texte affiché à côté de la case à cocher.
checked Non false Indique si la case est cochée. Il peut s'agir d'une valeur booléenne littérale ou d'une référence à une valeur dans le modèle de données.
disabled Non false Indique si la case à cocher est désactivée.
required Non false Indique si la case à cocher est obligatoire.
color Non - Palette de couleurs de la case à cocher ("primary", "accent", "warn").
labelPosition Non after Position du libellé par rapport à la case à cocher ("before" ou "after").
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
tooltip Non - Texte de l'info-bulle à afficher au passage de la souris.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialCheckbox",
    "label": "Agree to Terms and Conditions",
    "ariaLabel": "Agree to Terms and Conditions",
    "checked": {
      "path": "/user/agreedToTerms"
    },
    "color": "primary"
  }
]

MaterialChips

Composant de zone de liste de chips Material Design pour la sélection unique.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialChips :

Propriété Obligatoire Valeur par défaut Description
value Non - Valeur actuellement sélectionnée. Il peut s'agir d'une chaîne littérale ou d'une référence à une valeur dans le modèle de données.
options Oui - Liste des options de chip. Il peut s'agir d'un tableau d'objets {label, value} ou d'une référence de liaison de données.
disabled Non false Indique si la liste déroulante de chips est désactivée.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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

Composant sélecteur de date Material Design.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialDatepicker :

Propriété Obligatoire Valeur par défaut Description
label Non - Libellé du champ du sélecteur de date.
placeholder Non - Texte de l'espace réservé.
value Non - Date actuellement sélectionnée au format ISO.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
disabled Non false Indique si le sélecteur de date est désactivé.
required Non false Indique si une sélection de date est requise.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialDatepicker",
    "label": "Appointment Date",
    "placeholder": "Choose a date",
    "ariaLabel": "Appointment Date",
    "value": {
      "path": "/appointment/date"
    }
  }
]

MaterialInput

Champ de saisie de texte Material Design.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialInput :

Propriété Obligatoire Valeur par défaut Description
label Non - Libellé du champ de saisie.
placeholder Non - Texte de l'espace réservé.
value Non - Valeur actuelle de l'entrée. Il peut s'agir d'une chaîne littérale ou d'une référence à une valeur dans le modèle de données.
disabled Non false Indique si la saisie est désactivée.
name Non - Nom de l'élément d'entrée.
readonly Non false Indique si l'entrée est en lecture seule.
required Non false Indique si la saisie est obligatoire.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
type Non text Type d'entrée. Au choix : "text", "number", "password", "email", "tel" ou "url".
validationRegexp Non - Expression régulière pour la validation des entrées.
checks Non - Contrôles de validation des entrées.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

Wrapper A2UI pour le composant Angular Material Radio Button. Permet de sélectionner une seule option dans une liste d'options au sein d'un groupe d'options.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialRadioButton :

Propriété Obligatoire Valeur par défaut Description
value Non - Valeur actuellement sélectionnée. Il peut s'agir d'une chaîne littérale ou d'une référence de liaison de données.
options Oui - Liste des options radio disponibles. Il peut s'agir d'un tableau d'objets {label, value} ou d'une référence de liaison de données.
disabled Non false Indique si le groupe d'options est désactivé.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
color Non - Palette de couleurs du bouton radio ("primary", "accent", "warn").
labelPosition Non after Position du libellé par rapport à la case d'option. Au choix : "before" ou "after".
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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

Composant de sélection (menu déroulant) Material Design pour la sélection unique. Pour une accessibilité optimale, fournissez toujours un libellé descriptif ou utilisez aria-label pour les technologies d'assistance.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialSelect :

Propriété Obligatoire Valeur par défaut Description
label Non - Libellé du champ de sélection.
placeholder Non - Texte d'espace réservé affiché lorsqu'aucune valeur n'est sélectionnée.
value Non - Valeur actuellement sélectionnée. Il peut s'agir d'une chaîne littérale ou d'une référence à une valeur dans le modèle de données.
options Oui - Liste des options disponibles. Il peut s'agir d'un tableau d'objets {label, value} ou d'une référence de liaison de données.
disabled Non false Indique si le composant de sélection est désactivé.
required Non false Si une valeur est requise.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "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

Wrapper A2UI pour le composant Angular Material Slide Toggle. Prend en charge les liaisons de bascule booléennes et les attributs d'accessibilité personnalisés.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialSlideToggle :

Propriété Obligatoire Valeur par défaut Description
label Non - Libellé de texte affiché à côté du bouton bascule.
checked Non false Indique si le bouton bascule est activé. Il peut s'agir d'un littéral booléen ou d'une référence de liaison de données.
disabled Non false Indique si le bouton bascule est désactivé.
required Non false Indique si le bouton bascule est obligatoire.
color Non - Palette de couleurs du bouton bascule ("primary", "accent", "warn").
labelPosition Non after Position du libellé par rapport au bouton bascule ("before", "after").
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
tooltip Non - Texte de l'info-bulle à afficher au passage de la souris.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

Wrapper A2UI pour le composant Angular Material Slider. Permet de sélectionner des valeurs numériques et des contraintes de plage.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialSlider :

Propriété Obligatoire Valeur par défaut Description
value Non 0 Valeur actuelle du curseur. Il peut s'agir d'un nombre littéral ou d'une référence de liaison de données.
min Non 0 Valeur minimale du curseur.
max Non 100 Valeur maximale du curseur.
step Non 1 Incrément du curseur.
disabled Non false Indique si le curseur est désactivé.
color Non - Palette de couleurs du curseur ("primary", "accent", "warn").
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialSlider",
    "min": 0,
    "max": 100,
    "step": 5,
    "value": {
      "path": "/audio/volume"
    },
    "color": "primary",
    "ariaLabel": "Volume adjustment"
  }
]

MaterialTimepicker

Wrapper A2UI pour le composant Angular Material Timepicker. Compatible avec la sélection de l'heure et l'intégration des champs de formulaire.

Le tableau suivant décrit les propriétés disponibles pour le composant MaterialTimepicker :

Propriété Obligatoire Valeur par défaut Description
label Non - Libellé du champ du sélecteur de date et heure.
placeholder Non - Texte de l'espace réservé.
value Non - Heure actuellement sélectionnée au format ISO. Il peut s'agir d'une chaîne littérale ou d'une référence de liaison de données.
ariaLabel Non - Texte discernable pour les lecteurs d'écran. Recommandé pour l'accessibilité lorsqu'aucun libellé visible n'est présent.
ariaLabelledby Non - Identifie l'élément (ou les éléments) qui étiquettent l'élément actuel. Utilisé pour l'accessibilité.
ariaDescribedby Non - Identifie l'élément (ou les éléments) qui décrit l'élément actuel. Utilisé pour l'accessibilité.
disabled Non false Indique si le sélecteur d'heure est désactivé.
required Non false Indique si une sélection d'heure est requise.
style Non - Styles intégrés à appliquer à l'élément.
weight Non - Pondération de la mise en page de l'élément lorsqu'il est placé dans un conteneur Flex. 
[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

Composants de base du catalogue

Cette section fournit une référence pour les composants de catalogue de base A2UI disponibles.

Fichiers de schéma de catalogue de base

Pour en savoir plus sur ces propriétés, consultez les pages suivantes :

Propriétés communes de base du catalogue

Tous les composants, quel que soit leur type spécifique, partagent un ensemble de propriétés communes qui peuvent être configurées :

Propriété Requis Description
id Oui Identifiant unique du composant sur la surface actuelle.
accessibility Non Attributs permettant d'améliorer l'accessibilité, tels que les libellés et les rôles.
weight Non Valeur utilisée dans les mises en page Row ou Column pour contrôler l'espace occupé par le composant par rapport à ses frères et sœurs, de la même manière que flex-grow.

Composants de base de la mise en page du catalogue

Les composants de mise en page sont utilisés pour structurer et organiser d'autres composants dans l'interface utilisateur. Les composants de mise en page suivants sont disponibles :

Ligne

Un Row est un composant de mise en page utilisé pour organiser ses composants enfants horizontalement, de gauche à droite. Il sert de conteneur dans lequel vous pouvez placer plusieurs composants côte à côte. L'espacement et le positionnement exacts des enfants dans la ligne peuvent être contrôlés à l'aide des propriétés justify/distribution et align/alignment.

Le tableau suivant décrit les propriétés disponibles pour le composant Row :

Propriété Type/Valeurs Description
children v0.9 : tableau d'ID de composants ou définition de modèle
v0.8 : explicitList ou template 		Composants enfants à organiser horizontalement dans la ligne.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Contrôle la façon dont les composants enfants sont répartis le long de l'axe horizontal.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Contrôle l'alignement des composants enfants sur l'axe vertical.

v0.9 JSON

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

v0.8 JSON

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

Colonne

Un Column est un composant de mise en page utilisé pour organiser ses composants enfants verticalement, de haut en bas. Il sert de conteneur dans lequel vous pouvez placer plusieurs composants les uns en dessous des autres. L'espacement et le positionnement exacts des enfants dans la colonne peuvent être contrôlés à l'aide des propriétés justify/distribution et align/alignment.

Le tableau suivant décrit les propriétés disponibles pour le composant Column :

Propriété Type/Valeurs Description
children v0.9 : tableau d'ID de composants ou définition de modèle
v0.8 : explicitList ou template 		Composants enfants à organiser verticalement dans la colonne.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Contrôle la façon dont les composants enfants sont répartis le long de l'axe vertical.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Contrôle l'alignement des composants enfants sur l'axe horizontal.

v0.9 JSON

{
  "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"
    }
  }
}

Liste

Un List est un composant de mise en page qui affiche une liste déroulante d'éléments. Il prend en charge les enfants statiques et les modèles dynamiques pour générer des éléments à partir de données. Le défilement peut être vertical ou horizontal.

Le tableau suivant décrit les propriétés disponibles pour le composant List :

Propriété Type/Valeurs Description
children v0.9 : tableau d'ID de composants ou définition de modèle
v0.8 : explicitList ou template 		Éléments à afficher dans la liste.
direction vertical, horizontal Sens de défilement de la liste.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Contrôle l'alignement des éléments de liste sur l'axe transversal.

v0.9 JSON

{
  "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"
    }
  }
}

Composants d'affichage de base du catalogue

Les composants d'affichage sont utilisés pour présenter des informations à l'utilisateur. Les composants d'affichage suivants sont disponibles :

Texte

Le composant Text affiche du contenu textuel et accepte différents indices de style, tels que les titres, les légendes et le corps du texte.

Le tableau suivant décrit les propriétés disponibles pour le composant Text :

Propriété Type/Valeurs Description
text v0.9 : chaîne ou DataBinding
v0.8 : BoundValue 		Contenu textuel à afficher.
variant (v0.9)
usageHint (v0.8) 		h1, h2, h3, h4, h5, caption, body Indication de style pour le texte.

v0.9 JSON

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

v0.8 JSON

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

Image

Un composant Image affiche des images à partir d'une URL spécifiée et fournit des options permettant de contrôler la façon dont l'image s'adapte à son conteneur.

Le tableau suivant décrit les propriétés disponibles pour le composant Image :

Propriété Type/Valeurs Description
url v0.9 : chaîne ou DataBinding
v0.8 : BoundValue 		URL de l'image à afficher.
fit Chaîne Ajustement de l'image dans son conteneur (par exemple, "cover").
variant (v0.9)
usageHint (v0.8) 		Chaîne Indication pour les variantes d'utilisation ou de style (par exemple, "hero").

v0.9 JSON

{
  "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"
    }
  }
}

Icône

Le composant Icon affiche des icônes d'un ensemble standard défini dans le catalogue.

Le tableau suivant décrit les propriétés disponibles pour le composant Icon :

Propriété Type/Valeurs Description
name v0.9 : chaîne ou DataBinding
v0.8 : BoundValue 		Nom de l'icône à afficher (par exemple, "check").

v0.9 JSON

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

v0.8 JSON

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

Séparateur

Le composant Divider affiche une ligne de séparation visuelle, qui peut être horizontale ou verticale.

Le tableau suivant décrit les propriétés disponibles pour le composant Divider :

Propriété Type/Valeurs Description
axis horizontal, vertical Orientation de la ligne de séparation.

v0.9 JSON

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

v0.8 JSON

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

Composants interactifs de base du catalogue

Les composants interactifs vous permettent d'interagir avec l'application, par exemple en fournissant des entrées ou en déclenchant des actions. Les composants interactifs suivants sont disponibles :

Bouton

Le composant Button est un élément cliquable qui déclenche une action ou un événement spécifique dans l'application.

Le tableau suivant décrit les propriétés disponibles pour le composant Button :

Propriété Type/Valeurs Description
child ID du composant ID du composant à afficher dans le bouton (par exemple, un composant Texte).
variant (v0.9)
primary (v0.8) 		v0.9 : chaîne (par exemple, "primary")
v0.8 : booléen 		Type de style ou d'emphase appliqué au bouton.
action v0.9 : objet Event (par exemple, saisie de "event")
v0.8 : objet Action (par exemple, saisie de "name") 		Action à déclencher lorsque l'utilisateur clique sur le bouton.

v0.9 JSON

{
  "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

TextField est un composant interactif qui vous permet de saisir du texte. Il est également compatible avec la validation facultative.

Le tableau suivant décrit les propriétés disponibles pour le composant TextField :

Propriété Type/Valeurs Description
label v0.9 : String
v0.8 : BoundValue 		Libellé du champ de texte.
value (v0.9)
text (v0.8) 		v0.9 : chaîne ou DataBinding
v0.8 : BoundValue 		Contenu textuel ou chemin lié.
textFieldType shortText, longText, number, obscured et date Type du champ de texte.
validationRegexp Chaîne Expression régulière pour la validation.

v0.9 JSON

{
  "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

Le composant CheckBox est un bouton bascule booléen qui vous permet d'activer ou de désactiver un paramètre.

Le tableau suivant décrit les propriétés disponibles pour le composant CheckBox :

Propriété Type/Valeurs Description
label v0.9 : String
v0.8 : BoundValue 		Libellé de la case à cocher.
value v0.9 : DataBinding (booléen)
v0.8 : BoundValue (booléen) 		Valeur de la case à cocher (true/false) ou chemin lié.

v0.9 JSON

{
  "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" }
    }
  }
}

Curseur

Le composant Slider vous permet de sélectionner une valeur numérique dans une plage spécifique.

Le tableau suivant décrit les propriétés disponibles pour le composant Slider :

Propriété Type/Valeurs Description
value v0.9 : DataBinding (nombre)
v0.8 : BoundValue (nombre) 		Valeur actuelle du curseur ou du chemin lié.
minValue Nombre Valeur minimale de la plage.
maxValue Nombre Valeur maximale de la plage.

v0.9 JSON

{
  "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

Le composant DateTimeInput vous permet de sélectionner une date et une heure.

Le tableau suivant décrit les propriétés disponibles pour le composant DateTimeInput :

Propriété Type/Valeurs Description
value v0.9 : DataBinding
v0.8 : BoundValue 		Valeur de date/heure ou chemin de liaison sélectionnés.
enableDate Booléen Indique si la sélection de la date doit être activée.
enableTime Booléen Indique si la sélection de l'heure doit être activée.

v0.9 JSON

{
  "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) / MultipleChoice (v0.8)

Sélectionnez une ou plusieurs options dans une liste. Notez que ce composant a été renommé ChoicePicker dans la version 0.9, alors qu'il s'appelait MultipleChoice dans la version 0.8.

Le tableau suivant décrit les propriétés disponibles :

Propriété Type/Valeurs Description
options Tableau d'objets Liste des options sélectionnables par l'utilisateur. Chaque option doit comporter un libellé (chaîne dans la version 0.9, BoundValue dans la version 0.8) et une valeur.
selections v0.9 : DataBinding
v0.8 : BoundValue 		Valeurs sélectionnées ou chemin lié.
maxAllowedSelections Nombre Nombre maximal de sélections autorisées.

v0.9 JSON

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

v0.8 JSON

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

Composants de base du conteneur de catalogue

Les composants de conteneur permettent de regrouper et d'organiser d'autres composants. Les composants de conteneur suivants sont disponibles :

Carte

Un composant Card est un conteneur avec une élévation, une bordure et une marge intérieure qui regroupe le contenu associé.

Le tableau suivant décrit les propriétés disponibles pour le composant Card :

Propriété Type/Valeurs Description
child ID du composant ID du composant à afficher dans la carte.

v0.9 JSON

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

v0.8 JSON

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

Un composant Modal est une boîte de dialogue superposée déclenchée par un composant de point d'entrée.

Le tableau suivant décrit les propriétés disponibles pour le composant Modal :

Propriété Type/Valeurs Description
entryPointChild ID du composant ID du composant qui déclenche le modal (par exemple, un bouton).
contentChild ID du composant ID du composant à afficher comme contenu du modal.

v0.9 JSON

{
  "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"
    }
  }
}

Onglets

Un composant Tabs fournit une interface à onglets permettant d'organiser le contenu en panneaux interchangeables.

Le tableau suivant décrit les propriétés disponibles pour le composant Tabs :

Propriété Type/Valeurs Description
tabItems Tableau d'objets Liste des onglets. Chaque élément doit avoir un title (chaîne dans la version 0.9, BoundValue dans la version 0.8) et un child (ID de composant).

v0.9 JSON

{
  "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" }
      ]
    }
  }
}

Récapitulatif des différences entre les versions

Les noms et les propriétés des composants sont en grande partie identiques d'une version à l'autre. Voici les différences structurelles :

Aspect v0.8 v0.9
Wrapper de composant "component": { "Text": { ... } } "component": "Text", ...props
Valeurs de chaîne { "literalString": "Hello" } "Hello"
Enfants { "explicitList": ["a", "b"] } ["a", "b"]
Liaison de données { "path": "/data" } { "path": "/data" } (identique)
Style du texte/de l'image usageHint variant
Style des boutons primary: true variant: "primary"
Format de l'action { "name": "..." } { "event": { "name": "..." } }
Composant de choix MultipleChoice ChoicePicker
Alignement de la mise en page distribution, alignment justify, align
Valeur TextField text value

Guide d'évolution

Pour savoir comment passer de la version 0.8 à la version 0.9, consultez le guide d'évolution de la version 0.8 à la version 0.9.

Exemples concrets

Pour voir tous les composants en action :

cd samples/client/angular
yarn start gallery

Étapes suivantes