In questa pagina viene spiegato come formattare e strutturare i widget in una scheda o in una finestra di dialogo .
Utilizza Card Builder per progettare e visualizzare l'anteprima di messaggi delle schede JSON per le app di chat:
Apri il generatore di schedePrerequisiti
Un'app di Google Chat abilitata per le funzionalità interattive. Per creare un interattiva di Chat, completa una delle seguenti guide rapide basate nell'architettura dell'app che vuoi utilizzare:
- Servizio HTTP con Google Cloud Functions
- Script di Google Apps
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Mostra schede e finestre di dialogo nelle colonne
La
Widget columns
mostra fino a due colonne in una scheda o in una finestra di dialogo. Puoi aggiungere
widget per ogni colonna; i widget vengono visualizzati nell'ordine in cui sono specificato.
Per includere più di due colonne o per utilizzare le righe, usa il widget grid
.
L'altezza di ogni colonna è determinata dalla colonna più alta. Ad esempio, se la prima colonna è più alta della seconda, entrambe presentano dell'altezza della prima colonna. Poiché ogni colonna può contenere un numero diverso di widget, non puoi definire righe o allineare widget tra le colonne.
L'esempio seguente mostra una scheda con un widget columns
che include
2 colonne di testo. Per visualizzare solo il layout delle colonne e comprimere il codice
fai clic su Comprimi.
Quando lo spazio è vincolato, come nell'esempio seguente, la macro
la seconda colonna va a capo sotto la prima.
Definire la larghezza di una colonna
Le colonne vengono visualizzate una accanto all'altra. Puoi personalizzare la larghezza di ogni colonna
utilizzando
Campo horizontalSizeStyle
:
Se la larghezza dello schermo dell'utente è troppo ridotta, la seconda colonna va a capo sotto la prima:
- Sul web, la seconda colonna va a capo se la larghezza dello schermo è inferiore o uguale a 480 pixel.
- Sui dispositivi iOS, la seconda colonna va a capo se la larghezza dello schermo è inferiore o uguale a 300 pt.
- Sui dispositivi Android, la seconda colonna va a capo se la larghezza dello schermo è inferiore a o uguale a 320 dp.
L'esempio seguente mostra una scheda con un widget columns
che include
2 colonne di testo con 4 elementi nelle colonne. Ogni elemento nelle colonne ha
horizontalSizeStyle
applicata per manipolare la quantità di spazio disponibile per il testo
riempie ogni colonna:
- Il primo paragrafo di testo utilizza
FILL_MINIMUM_SPACE
per riempire non più del 30% della larghezza delle schede. - Il secondo paragrafo di testo utilizza
FILL_AVAILABLE_SPACE
per riempire lo spazio disponibile spazio nella larghezza della scheda. In questo esempio, riempie il 70% del standard. - Il terzo paragrafo di testo non definisce il valore
horizontalSizeStyle
, quindi viene usato per impostazione predefinita per riempire lo spazio disponibile per la scheda. - Il quarto paragrafo di testo utilizza
FILL_MINIMUM_SPACE
per riempire non più del 30% della larghezza delle schede.
Definire l'allineamento orizzontale di una colonna
Puoi allineare i widget orizzontalmente a sinistra, a destra o al centro di una colonna
la definizione
Campo horizontalAligment
:
Se il campo horizontalAlignment
non è definito, i widget sono allineati al campo
a sinistra nella colonna.
Il seguente esempio consente di allineare orizzontalmente il testo all'interno di una colonna a sinistra:
Il seguente esempio consente di allineare orizzontalmente il testo all'interno di una colonna al centro:
Il seguente esempio consente di allineare orizzontalmente il testo di una colonna a destra:
Definire l'allineamento verticale di una colonna
Puoi allineare i widget verticalmente in alto, in basso o al centro di una colonna
la definizione
Campo verticalAlignment
:
Se il campo verticalAlignment
non è definito, i widget in una colonna sono allineati
in alto.
L'esempio seguente consente di allineare verticalmente il testo di una colonna in alto:
L'esempio seguente consente di allineare verticalmente il testo all'interno di una colonna al centro:
L'esempio seguente consente di allineare verticalmente il testo all'interno di una colonna in basso:
Aggiungi un divisore orizzontale tra i widget
La
Widget divider
mostra una linea orizzontale che copre la larghezza di una scheda
tra widget impilati verticalmente. La linea è un divisore visivo che aiuta
gli utenti distinguono un widget dall'altro, semplificando la scansione delle schede
e capire.
Di seguito è riportata una scheda composta da widget divider
tra altri tipi di
widget:
Visualizzare una griglia con una raccolta di elementi
La
Widget grid
mostra una griglia con una raccolta di elementi. Una griglia supporta un numero qualsiasi di
come colonne ed elementi. Il numero di righe è determinato dagli elementi divisi per le colonne.
Una griglia con 10 elementi e 2 colonne ha 5 righe. Una griglia con 11 elementi e 2
ha 6 righe.
Il widget supporta i suggerimenti, che aiutano gli utenti a inserire dati uniformi e
azioni in caso di modifica,
Actions
che vengono eseguite quando si verifica una modifica nel campo di immissione testo, come un utente che aggiunge o
l'eliminazione di testo.
L'esempio seguente è una griglia a 2 colonne con un singolo elemento:
Definisci la posizione del testo con un'immagine in una griglia
La
Campo gridItemLayout
consente di definire all'interno di ogni gridItem
, se il testo appare sopra o sotto
l'elemento nella griglia. Se il campo gridItemLayout
non è definito, il testo è impostato sul valore predefinito
vengono visualizzati sotto l'elemento nella griglia
L'esempio seguente è una griglia a 3 colonne con testo e un'immagine in ogni griglia. La prima griglia definisce il testo da visualizzare sopra l'immagine, la seconda "Griglia" definisce il testo da visualizzare sotto l'immagine, mentre la terza griglia la posizione del testo.
Aggiungere un bordo agli elementi UI
Per gli elementi visualizzati in un widget column
o grid
, puoi aggiungere un bordo a
a questi elementi UI definendo un
Campo borderType
e un
Campo borderStyle
.
Se non viene definito alcun campo borderStyle
, per impostazione predefinita non viene mostrato alcun bordo. Puoi
definisci un borderType
da applicare a tutti gli elementi all'interno di un widget o applica lo stile
a ogni singolo elemento di un widget.
L'esempio seguente è una griglia a 2 colonne con un'immagine in ogni griglia in cui il tipo, lo stile e il colore del bordo sono stati definiti per essere applicati a tutti gli elementi all'interno a griglia.
L'esempio seguente è una griglia a 3 colonne con un'immagine in ogni griglia e la
lo stile e il tipo di bordo definiti singolarmente. Il primo
l'immagine ha un bordo definito come STROKE
. La seconda immagine ha un bordo definito come
NO_BORDER
. La terza immagine non ha alcun bordo definito.
Risoluzione dei problemi
Quando un'app Google Chat o card restituisce un errore, L'interfaccia di Chat mostra il messaggio "Si è verificato un problema". o "Impossibile elaborare la richiesta". A volte, l'UI di Chat non mostra alcun messaggio di errore, ma l'app Chat o la scheda restituisce un risultato inaspettato; Ad esempio, il messaggio di una scheda potrebbe non vengono visualizzate.
Anche se un messaggio di errore potrebbe non essere visualizzato nella UI di Chat, messaggi di errore descrittivi e dati di log che ti aiuteranno a correggere gli errori quando il logging degli errori per le app di chat è attivo. Per assistenza con la visualizzazione, il debug e la correzione degli errori, consulta Risolvere i problemi e correggere gli errori di Google Chat.
Argomenti correlati
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType