In questa pagina viene spiegato come formattare e strutturare i widget in una scheda o in un messaggio di dialogo.
Utilizza Card Builder per progettare e visualizzare l'anteprima dei messaggi delle schede JSON per le app di chat:
Apri Card BuilderPrerequisiti
Visualizza schede e finestre di dialogo in colonne
Il widget columns
mostra fino a due colonne in una scheda o una finestra di dialogo. Puoi aggiungere widget a ogni colonna; i widget vengono visualizzati nell'ordine in cui sono specificati.
Per includere più di due colonne o per utilizzare le righe, utilizza il widget grid
.
L'altezza di ogni colonna è determinata dalla colonna più alta. Ad esempio, se la prima colonna è più alta della seconda, entrambe le colonne avranno l'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 a colonne e per comprimere l'esempio di codice, fai clic su Comprimi.
Quando lo spazio è limitato, come nell'esempio seguente, la seconda colonna va a capo sotto la prima colonna.
Definire la larghezza di una colonna
Le colonne vengono visualizzate affiancate. Puoi personalizzare la larghezza di ogni colonna utilizzando il 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 o uguale a 320 dp.
L'esempio seguente mostra una scheda con un widget columns
che presenta
2 colonne di testo con 4 elementi nelle colonne. A ogni elemento nelle colonne è stato applicato horizontalSizeStyle
per manipolare lo spazio in cui 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 nella larghezza della scheda. In questo esempio, riempie il 70% della larghezza della scheda. - Il terzo paragrafo di testo non definisce
horizontalSizeStyle
, pertanto per impostazione predefinita occupa lo spazio disponibile dello spazio della 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 definendo il campo horizontalAligment
.
Se il campo horizontalAlignment
non è definito, i widget sono allineati a sinistra nella colonna.
Nell'esempio seguente il testo di una colonna a sinistra viene allineato orizzontalmente:
Nell'esempio seguente il testo viene allineato orizzontalmente in una colonna al centro:
Nell'esempio seguente il testo di una colonna a destra viene allineato orizzontalmente:
Definire l'allineamento verticale di una colonna
Puoi allineare i widget verticalmente in alto, in basso o al centro di una colonna definendo il campo verticalAlignment
.
Se il campo verticalAlignment
non è definito, i widget in una colonna sono allineati
in alto.
Nell'esempio seguente, il testo di una colonna viene allineato verticalmente nella parte superiore:
Nell'esempio seguente il testo all'interno di una colonna al centro viene allineato verticalmente:
L'esempio seguente allinea verticalmente il testo all'interno di una colonna nella parte inferiore:
Aggiungi un divisore orizzontale tra i widget
Il widget divider
mostra una linea orizzontale che copre la larghezza di una scheda tra i widget impilati verticalmente. La linea è un divisore visivo che aiuta gli utenti a distinguere tra un widget e un altro, rendendo le schede più facili da scansionare e comprendere.
Di seguito è riportata una scheda costituita da un widget divider
tra altri tipi di widget:
Visualizza una griglia con una raccolta di elementi
Il widget grid
mostra una griglia con una raccolta di elementi. Una griglia supporta un numero illimitato di
colonne ed elementi. Il numero di righe è determinato dal numero di elementi diviso per le colonne.
Una griglia con 10 elementi e 2 colonne ha 5 righe. Una griglia con 11 elementi e 2
colonne ha 6 righe.
Il widget supporta suggerimenti, che consentono agli utenti di inserire dati uniformi, e azioni in caso di modifica, ovvero Actions
che vengono eseguite quando si verifica una modifica nel campo di immissione testo, ad esempio quando un utente aggiunge o elimina testo.
L'esempio seguente è una griglia a 2 colonne con un singolo elemento:
Definisci la posizione in cui viene visualizzato il testo con un'immagine in una griglia
Il campo gridItemLayout
consente di definire all'interno di ogni gridItem
, se il testo viene visualizzato sopra o sotto l'elemento nella griglia. Se gridItemLayout
non è definito, il testo viene visualizzato
sotto l'elemento nella griglia per impostazione predefinita
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 il testo da visualizzare sotto l'immagine e la terza non ne definisce la posizione.
Aggiungere un bordo agli elementi dell'interfaccia utente
Per gli elementi che compaiono 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 visualizzato alcun bordo. Puoi
definire un borderType
da applicare a tutti gli elementi all'interno di un widget o applicare lo stile
a ogni singolo elemento all'interno di un widget.
L'esempio seguente è una griglia a 2 colonne con un'immagine in ogni griglia in cui sono stati definiti il tipo, lo stile e il colore del bordo da applicare a tutti gli elementi all'interno della griglia.
L'esempio seguente è una griglia a 3 colonne con un'immagine in ogni griglia e lo stile e il tipo di bordo definiti singolarmente. La prima
immagine ha un bordo definito come STROKE
. La seconda immagine ha un bordo definito come NO_BORDER
. La terza immagine non ha un bordo definito.
Risolvi il problema
Quando un'app o una scheda Google Chat restituisce un errore, nell'interfaccia di Chat viene visualizzato il messaggio "Si è verificato un problema". o "Impossibile elaborare la richiesta". A volte nella UI di Chat non vengono visualizzati messaggi di errore, ma l'app o la scheda di Chat produce un risultato imprevisto; ad esempio, un messaggio di scheda potrebbe non essere visualizzato.
Anche se un messaggio di errore potrebbe non essere visualizzato nell'interfaccia utente di Chat, sono disponibili messaggi di errore descrittivi e dati di log per aiutarti a correggere gli errori quando il logging degli errori per le app di Chat è attivato. Per assistenza su visualizzazione, debug e correzione degli errori, consulta l'articolo Risolvere gli errori di Google Chat.
Argomenti correlati
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType