In questa pagina viene descritto come creare i componenti e la struttura di una card. Le schede sono utenti interfacce che le app Google Chat possono utilizzare per presentare e raccogliere dagli utenti di Chat. Le app di chat possono creare e schede display nelle seguenti interfacce:
- Messaggi che contengono una o più schede.
- Home page che viene visualizzata dalla scheda Home nella visualizzazione i messaggi con l'app Chat.
- Finestre di dialogo, ovvero schede che si aprono in una nuova finestra dai messaggi e dalle home page.
In questa pagina vengono descritti i seguenti componenti di una scheda:
- Intestazioni, che in genere contengono il titolo di una scheda o di una scheda .
- Sezioni, che costituiscono il corpo principale della scheda, inclusi widget e altri elementi interattivi. In una carta puoi aggiungere un'ulteriore struttura alla scheda, incluse colonne e griglie.
- Piè di pagina fissi, che vengono visualizzati nella parte inferiore di finestre di dialogo per visualizzare elementi UI permanenti, come i pulsanti.
Prerequisiti
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
Utilizza Card Builder per progettare e visualizzare l'anteprima dei messaggi e delle interfacce utente delle app di chat:
Apri il generatore di schedeAggiungi un'intestazione
Il widget CardHeader
che rappresenta l'intestazione di una scheda. Le intestazioni possono includere un
titolo, sottotitolo e immagine avatar per la tua scheda.
Di seguito è riportato un esempio di CardHeader
:
Aggiungere una o più sezioni di schede
Il widget CardSection
è un contenitore di alto livello all'interno di una scheda. Utilizzi la carta
per raggruppare i widget all'interno di una scheda. Per ogni sezione della scheda, puoi includere
un'intestazione e uno o più widget.
Di seguito è riportato un esempio di CardSection
che contiene due textParagraph
widget:
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:
Aggiungi colonne
La
Widget columns
mostra fino a due colonne in una scheda. 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.
Definisci la larghezza della 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 il
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 della scheda. - 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 della scheda.
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
a sinistra in una 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 una griglia per visualizzare 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:
Per definire la posizione in cui il testo viene visualizzato con un'immagine in una griglia, puoi specificare
Campo gridItemLayout
:
Questo campo consente di definire se il testo viene visualizzato sopra o sotto
l'elemento nella griglia. Se il campo gridItemLayout
non è definito, il testo è impostato sul valore predefinito
vengono visualizzate sotto l'elemento nella griglia.
L'esempio seguente è una griglia a tre 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 a una griglia o una colonna
Per gli elementi visualizzati in un widget column
o grid
, puoi aggiungere un bordo
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 tipo di bordo, stile e colore 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.
Aggiungi un piè di pagina permanente
La CardFixedFooter
rappresenta il piè di pagina di un messaggio della finestra di dialogo inviato
un'app di Chat.
I piè di pagina possono includere un pulsante principale e un pulsante secondario.
Il widget CardFixedFooter
è disponibile solo per
finestre di dialogo.
Di seguito è riportato un esempio di widget CardFixedFooter
con due pulsanti:
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.