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.

Propriétés courantes

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, comme flex-grow.

Pour obtenir une spécification complète de toutes les propriétés, y compris celles qui sont communes et celles qui sont spécifiques aux composants, consultez la définition du catalogue standard (schéma JSON).

Composants de mise en page

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 distribution et alignment.

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

Propriété Type/Valeurs Description
children explicitList ou template Composants enfants à organiser horizontalement dans la ligne.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Contrôle la façon dont les composants enfants sont répartis le long de l'axe horizontal.
alignment start, center, end, stretch Contrôle l'alignement des composants enfants sur l'axe vertical.

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 distribution et alignment.

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

Propriété Type/Valeurs Description
children explicitList ou template Composants enfants à organiser verticalement dans la colonne.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Contrôle la façon dont les composants enfants sont répartis le long de l'axe vertical.
alignment start, center, end, stretch Contrôle l'alignement des composants enfants sur l'axe horizontal.

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 accepte 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 explicitList ou template Éléments à afficher dans la liste.
direction vertical, horizontal Sens de défilement de la liste.
alignment start, center, end, stretch Contrôle l'alignement des éléments de liste sur l'axe transversal.

JSON

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

Composants d'affichage

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 conseils 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 BoundValue Contenu textuel à afficher.
usageHint h1, h2, h3, h4, h5, caption, body Indication de style pour le texte.

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 BoundValue URL de l'image à afficher.
fit Chaîne Ajustement de l'image dans son conteneur (par exemple, "cover").
usageHint Chaîne Indication d'utilisation (par exemple, "héros").

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 BoundValue Nom de l'icône à afficher (par exemple, "check").

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.

JSON

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

Composants interactifs

Les composants interactifs vous permettent d'interagir avec l'application, par exemple en fournissant des informations 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).
primary Booléen Indique s'il s'agit d'un bouton principal (mis en avant).
action Objet Action à déclencher lorsque l'utilisateur clique sur le bouton.

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 BoundValue Libellé du champ de texte.
text 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.

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 BoundValue Libellé de la case à cocher.
value BoundValue (booléen) Valeur de la case à cocher (true/false) ou chemin lié.

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 BoundValue (nombre) Valeur actuelle du curseur ou du chemin lié.
minValue Nombre Valeur minimale de la plage.
maxValue Nombre Valeur maximale de la plage.

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 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.

JSON

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

Choix multiples

Le composant MultipleChoice vous permet de sélectionner une ou plusieurs options dans une liste.

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

Propriété Type/Valeurs Description
options Tableau d'objets Liste des options que l'utilisateur peut sélectionner. Chaque option doit comporter un libellé et une valeur.
selections BoundValue Valeurs sélectionnées ou chemin lié.
maxAllowedSelections Nombre Nombre maximal de sélections autorisé.

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 conteneur

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.

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.

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 et un child (ID de composant).

JSON

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

Étapes suivantes