Auf dieser Seite wird erläutert, wie Sie Widgets in einer Karte oder einem Dialogfeld formatieren und strukturieren. angezeigt.
Mit dem Card Builder können Sie JSON-Kartennachrichten für Chat-Apps erstellen und als Vorschau ansehen:
Card Builder öffnenVorbereitung
Eine Google Chat App mit aktivierten interaktiven Funktionen. So erstellen Sie ein Chat-App verwenden, führen Sie eine der folgenden Kurzanleitungen aus für die App-Architektur, die Sie verwenden möchten:
- HTTP-Dienst mit Google Cloud Functions
- Google Apps Script
- Google Cloud Dialogflow CX
- Cloud Pub/Sub
Karten und Dialogfelder in Spalten anzeigen
Die
columns
-Widget
zeigt bis zu zwei Spalten in einer Karte oder einem Dialogfeld an. Sie können
Widgets hinzufügen. erscheinen die Widgets in der Reihenfolge, angegeben ist.
Wenn Sie mehr als zwei Spalten einfügen oder Zeilen verwenden möchten, verwenden Sie das grid
-Widget.
Die Höhe jeder Spalte wird durch die höhere Spalte bestimmt. Beispiel: ist die erste Spalte höher als die zweite Spalte, haben beide Spalten Höhe der ersten Spalte. Weil jede Spalte eine andere Zahl enthalten kann, von Widgets können Sie keine Zeilen definieren oder Widgets zwischen den Spalten ausrichten.
Im folgenden Beispiel wird eine Karte mit einem columns
-Widget angezeigt, das Folgendes enthält:
2 Textspalten. Um nur das Spaltenlayout anzuzeigen und den Code zu minimieren
auf Minimieren.
Wenn der Platz eingeschränkt ist, wie im folgenden Beispiel, wird der
wird die zweite Spalte
unter die erste eingefügt.
Breite einer Spalte definieren
Die Spalten werden nebeneinander angezeigt. Sie können die Breite jeder Spalte anpassen.
mithilfe der
Feld horizontalSizeStyle
.
Wenn die Bildschirmbreite des Nutzers zu schmal ist, wird die zweite Spalte unter der ersten angezeigt:
- Im Web wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite kleiner oder gleich 480 Pixel.
- Auf iOS-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite kleiner als oder von 300 Punkten entspricht.
- Auf Android-Geräten wird die zweite Spalte umgebrochen, wenn die Bildschirmbreite kleiner als 320 dp entsprechen.
Im folgenden Beispiel wird eine Karte mit einem columns
-Widget angezeigt, das Folgendes enthält:
2 Textspalten mit 4 Elementen in den Spalten. Jedes Element in den Spalten hat
horizontalSizeStyle
angewendet, um den Abstand des Textes zu ändern
Spalte gefüllt:
- Im ersten Textabschnitt wird
FILL_MINIMUM_SPACE
verwendet, um nicht mehr als 30 % auszufüllen. der Kartenbreite aus. - Im zweiten Absatz wird
FILL_AVAILABLE_SPACE
verwendet, um die verfügbaren in der Breite der Karte ein. In diesem Beispiel füllt er 70% der Breite. - Im dritten Absatz wird
horizontalSizeStyle
nicht definiert, daher wird hier die Standardeinstellung verwendet. um den verfügbaren Bereich der Karte auszufüllen. - Im vierten Absatz wird
FILL_MINIMUM_SPACE
verwendet, um nicht mehr als 30 % auszufüllen. der Kartenbreite aus.
Horizontale Ausrichtung einer Spalte definieren
Sie können Widgets horizontal an der linken, rechten oder Mitte einer Spalte ausrichten, indem Sie
der Definition der
Feld horizontalAligment
.
Wenn das Feld horizontalAlignment
nicht definiert ist, werden Widgets am
links in der Spalte.
Im folgenden Beispiel wird Text in einer Spalte horizontal links ausgerichtet:
Im folgenden Beispiel wird Text innerhalb einer Spalte horizontal in der Mitte ausgerichtet:
Im folgenden Beispiel wird der Text in einer Spalte horizontal auf der rechten Seite ausgerichtet:
Vertikale Ausrichtung einer Spalte festlegen
Sie können Widgets vertikal am oberen, unteren oder mittleren Rand einer Spalte ausrichten, indem Sie
der Definition der
Feld verticalAlignment
.
Wenn das Feld verticalAlignment
nicht definiert ist, werden die Widgets in einer Spalte ausgerichtet.
ganz oben.
Im folgenden Beispiel wird der Text in einer Spalte vertikal am oberen Rand ausgerichtet:
Im folgenden Beispiel wird Text innerhalb einer Spalte vertikal zentriert:
Im folgenden Beispiel wird Text innerhalb einer Spalte am unteren Rand vertikal ausgerichtet:
Horizontale Trennlinie zwischen Widgets hinzufügen
Die
divider
-Widget
Es wird eine horizontale Linie angezeigt, die die Breite einer Karte umfasst.
zwischen vertikal gestapelten Widgets. Die Linie ist eine visuelle Trennlinie, die hilft,
Nutzer können zwischen Widgets unterscheiden, was das Scannen von Karten erleichtert.
und zu verstehen.
Das folgende Beispiel zeigt eine Karte mit einem divider
-Widget zwischen anderen Arten von
Widgets:
Raster mit einer Sammlung von Elementen anzeigen
Die
grid
-Widget
zeigt ein Raster mit einer Sammlung von Elementen an. Ein Raster unterstützt beliebig viele
Spalten und Elemente. Die Anzahl der Zeilen ergibt sich aus den Elementen geteilt durch die Spalten.
Ein Raster mit 10 Elementen und 2 Spalten hat 5 Zeilen. Ein Raster mit 11 Elementen und 2
hat 6 Zeilen.
Das Widget unterstützt Vorschläge, mit denen Nutzer einheitliche Daten eingeben können.
bei Änderungen, die
Actions
die ausgeführt werden, wenn eine Änderung im Texteingabefeld vorgenommen wird, z. B. wenn ein Nutzer
Text löschen.
Das folgende Beispiel zeigt ein zweispaltiges Raster mit einem einzelnen Element:
Lege fest, wo Text mit einem Bild in einem Raster angezeigt werden soll
Die
Feld „gridItemLayout
“
können Sie in jedem gridItem
definieren, ob der Text darüber oder darunter angezeigt wird
das Element im Raster aus. Wenn gridItemLayout
nicht definiert ist, wird standardmäßig der Text verwendet.
werden unterhalb des Elements im Raster angezeigt.
Das folgende Beispiel zeigt ein dreispaltiges Raster mit Text und einem Bild in jedem Raster. Das erste Raster legt fest, dass der Text über dem Bild angezeigt wird, das zweite Raster definiert, dass Text unter dem Bild angezeigt wird, und das dritte Raster definiert nicht die Position des Textes.
Rahmen zu UI-Elementen hinzufügen
Elemente, die in einem column
- oder grid
-Widget angezeigt werden, können dem
UI-Elementen hinzufügen, indem Sie eine
Feld „borderType
“
und
Feld borderStyle
.
Wenn kein borderStyle
-Feld definiert ist, wird standardmäßig kein Rahmen angezeigt. Sie können
Definieren Sie eine borderType
, die auf alle Elemente in einem Widget angewendet wird, oder wenden Sie den Stil an
für jedes einzelne Element
in einem Widget hinzufügen.
Das folgende Beispiel zeigt ein zweispaltiges Raster mit einem Bild in jedem Raster, bei dem der Rahmentyp, -stil und -farbe definiert und auf alle Elemente im Raster.
Das folgende Beispiel zeigt ein dreispaltiges Raster mit einem Bild in jedem Raster und dem
Rahmenlinienstil und -typ einzeln definiert werden. Das erste
Bild hat einen Rahmen, der als STROKE
definiert ist. Das zweite Bild hat einen Rahmen,
NO_BORDER
Für das dritte Bild ist kein Rahmen definiert.
Fehlerbehebung
Wenn eine Google Chat-App oder card gibt einen Fehler zurück. Der Parameter In der Chatoberfläche wird die Meldung „Ein Fehler ist aufgetreten“ angezeigt. oder „Ihre Anfrage kann nicht verarbeitet werden.“ Manchmal kann die Chat-UI Es wird zwar keine Fehlermeldung angezeigt, aber die Chat-App oder die Karte zu einem unerwarteten Ergebnis führt. z. B. wird eine Kartennachricht angezeigt werden.
Auch wenn in der Chat-Benutzeroberfläche möglicherweise keine Fehlermeldung angezeigt wird, beschreibende Fehlermeldungen und Protokolldaten stehen zur Fehlerbehebung zur Verfügung. wenn die Fehlerprotokollierung für Chat-Apps aktiviert ist. Hilfe bei der Anzeige: Debugging und Beheben von Fehlern finden Sie unter Google Chat-Fehler beheben
Weitere Informationen
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType