Mettre en forme la structure d'une carte ou d'une boîte de dialogue

Cette page explique comment formater et structurer les widgets dans une carte ou une boîte de dialogue .

Utilisez le générateur de cartes pour concevoir et prévisualiser des messages de cartes JSON pour les applications Chat:

Ouvrir Card Builder

Prérequis

Une application Google Chat avec des fonctionnalités interactives. Pour créer un interactive, suivez l'un des guides de démarrage rapide suivants sur l'architecture de l'application que vous souhaitez utiliser:

Afficher les fiches et les boîtes de dialogue en colonnes

La Widget columns affiche jusqu'à deux colonnes par fiche ou boîte de dialogue. Vous pouvez ajouter des widgets à chaque colonne ; les widgets apparaissent dans l'ordre dans lequel ils sont spécifié. Pour inclure plus de deux colonnes ou utiliser des lignes, utilisez le widget grid.

La hauteur de chaque colonne est déterminée par la colonne la plus haute. Par exemple, si la première colonne est plus haute que la deuxième, les deux colonnes ont le la hauteur de la première colonne. Comme chaque colonne peut contenir un nombre différent de widgets, vous ne pouvez pas définir de lignes ni aligner les widgets entre les colonnes.

L'exemple suivant affiche une fiche avec un widget columns qui présente 2 colonnes de texte. Pour n'afficher que la mise en page des colonnes et réduire le code échantillon, cliquez sur Réduire. Lorsque l'espace est limité, comme dans l'exemple suivant, la deuxième colonne encapsule sous la première colonne.

Définir la largeur d'une colonne

Les colonnes s'affichent côte à côte. Vous pouvez personnaliser la largeur de chaque colonne à l'aide du Champ horizontalSizeStyle. Si la largeur de l'écran de l'utilisateur est trop étroite, la deuxième colonne passe à la ligne en dessous de la première:

  • Sur le Web, la deuxième colonne renvoie automatiquement à un message si la largeur de l'écran est inférieure ou égale à 480 pixels.
  • Sur les appareils iOS, la deuxième colonne renvoie automatiquement à une ligne si la largeur de l'écran est inférieure à égal à 300 pts
  • Sur les appareils Android, la deuxième colonne renvoie automatiquement à une ligne si la largeur de l'écran est inférieure à ou égales à 320 dp.

L'exemple suivant affiche une fiche avec un widget columns qui présente 2 colonnes de texte avec 4 éléments dans les colonnes. Chaque élément des colonnes a horizontalSizeStyle appliqué afin de manipuler l'espace entre le texte remplit chaque colonne:

  • Le premier paragraphe de texte utilise FILL_MINIMUM_SPACE pour remplir un maximum de 30% de la largeur des cartes.
  • Le deuxième paragraphe utilise FILL_AVAILABLE_SPACE pour remplir le champ d’espace dans la largeur de la carte. Dans cet exemple, elle occupe 70% de l'espace la largeur.
  • Le troisième paragraphe de texte ne définit pas horizontalSizeStyle, il est donc défini par défaut pour remplir l'espace disponible de l'espace de la carte.
  • Le quatrième paragraphe de texte utilise FILL_MINIMUM_SPACE pour remplir un maximum de 30% de la largeur des cartes.

Définir l'alignement horizontal d'une colonne

Vous pouvez aligner les widgets horizontalement à gauche, à droite ou au centre d'une colonne en définir les Champ horizontalAligment. Si le fichier horizontalAlignment n'est pas défini, les widgets sont alignés sur le restant dans la colonne.

L'exemple suivant aligne horizontalement le texte d'une colonne à gauche:

L'exemple suivant aligne horizontalement le texte d'une colonne au centre:

L'exemple suivant aligne horizontalement le texte d'une colonne à droite:

Définir l'alignement vertical d'une colonne

Vous pouvez aligner les widgets verticalement en haut, en bas ou au centre d'une colonne en définir les Champ verticalAlignment. Si le champ verticalAlignment n'est pas défini, les widgets d'une colonne sont alignés. en haut de la page.

L'exemple suivant aligne verticalement le texte d'une colonne vers le haut:

L'exemple suivant aligne verticalement du texte dans une colonne au centre:

L'exemple suivant aligne verticalement le texte d'une colonne en bas:

Ajouter une séparation horizontale entre les widgets

La Widget divider Affiche une ligne horizontale couvrant toute la largeur d'une carte. entre des widgets empilés verticalement. La ligne est un séparateur visuel qui aide les utilisateurs font la distinction entre un widget et un autre, ce qui facilite la lecture des cartes. et comprendre.

Voici une fiche composée du widget divider entre d'autres types de widgets:

Afficher une grille avec une collection d'éléments

La Widget grid affiche une grille avec un ensemble d'éléments. Une grille prend en charge n'importe quel nombre des colonnes et des éléments. Le nombre de lignes est calculé en divisant le nombre d'éléments par le nombre de colonnes. Une grille de 10 éléments et 2 colonnes contient 5 lignes. Grille contenant 11 éléments et 2 de colonnes contient 6 lignes.

Le widget prend en charge les suggestions, qui aident les utilisateurs à saisir des données uniformes. les actions en cas de changement, qui sont Actions qui s'exécutent lorsqu'une modification est apportée au champ de saisie de texte, par exemple lorsqu'un utilisateur ajoute ou supprimer du texte.

L'exemple suivant est une grille à deux colonnes avec un seul élément:

Définir l'emplacement du texte avec une image dans une grille

La Champ gridItemLayout vous permet de définir dans chaque gridItem, si le texte apparaît au-dessus ou en dessous l'élément dans la grille. Si gridItemLayout n'est pas défini, le texte est défini par défaut sur apparaissent sous l'élément de la grille ;

L'exemple suivant est une grille à trois colonnes avec du texte et une image dans chaque grille. La première grille définit le texte à afficher au-dessus de l'image, la seconde la grille définit le texte à afficher sous l'image, tandis que la troisième grille ne définit pas la position du texte.

Ajouter une bordure aux éléments de l'interface utilisateur

Vous pouvez ajouter une bordure aux éléments qui apparaissent dans un widget column ou grid. ces éléments d'interface utilisateur en définissant Champ borderType et un borderStyle. Si aucun champ borderStyle n'est défini, aucune bordure n'est affichée par défaut. Vous pouvez définir un borderType à appliquer à tous les éléments d'un widget ou appliquer le style ; à chaque élément d'un widget.

L'exemple suivant est une grille à deux colonnes avec une image dans chaque grille où le le type, le style et la couleur de bordure ont été définis pour s'appliquer à tous les éléments de la la grille.

L'exemple suivant est une grille à 3 colonnes avec une image dans chaque grille et le le style et le type de bordure sont définis individuellement. Le premier La bordure de l'image est définie sur STROKE. La deuxième image présente une bordure NO_BORDER Aucune bordure n'est définie pour la troisième image.

Résoudre les problèmes

Lorsqu'une application ou card renvoie une erreur, la L'interface Chat affiche le message "Une erreur s'est produite". ou "Impossible de traiter votre demande." Parfois, l'interface utilisateur de Chat n'affiche aucun message d'erreur, mais que l'application ou la carte produit un résultat inattendu. Par exemple, un message de fiche peut ne pas s'affichent.

Même s'il est possible qu'aucun message d'erreur ne s'affiche dans l'interface utilisateur de Chat, Des messages d'erreur descriptifs et des données de journaux sont disponibles pour vous aider à corriger les erreurs. Lorsque la journalisation des erreurs est activée pour les applications Chat. Pour obtenir de l'aide, le débogage et la correction des erreurs, consultez Résoudre les problèmes liés à Google Chat