Crea schede per le app Google Chat

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:

Utilizza Card Builder per progettare e visualizzare l'anteprima dei messaggi e delle interfacce utente delle app di chat:

Apri il generatore di schede

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

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.