Nesta página, explicamos como formatar e estruturar widgets em um card ou uma mensagem de caixa de diálogo.
Crie e visualize cards com o Criador de cards.
Abra o Criador de cards.Pré-requisitos
Exibir cards e caixas de diálogo em colunas
O
widget columns
mostra até duas colunas em um card ou caixa de diálogo. Você pode adicionar
widgets a cada coluna, que vão aparecer na ordem em que são especificados.
Para incluir mais de duas colunas ou usar linhas, utilize o widget grid.
A altura de cada coluna é determinada pela coluna mais alta. Por exemplo, se a primeira coluna for mais alta que a segunda, ambas terão a altura da primeira. Como cada coluna pode conter um número diferente de widgets, não é possível definir linhas ou alinhar widgets entre as colunas.
O exemplo a seguir mostra um card com um widget columns que tem duas colunas de texto. Para ver somente o layout de colunas e recolher o exemplo de
código, clique em Recolher.
Quando o espaço é restrito, como no exemplo abaixo, a
segunda coluna é encapsulada abaixo da primeira.
Definir a largura de uma coluna
As colunas são exibidas lado a lado. É possível personalizar a largura de cada coluna
usando o
campo horizontalSizeStyle.
Se a largura da tela do usuário for muito estreita, a segunda coluna vai ser agrupada abaixo da primeira:
- Na Web, a segunda coluna é unida se a largura da tela for menor ou igual a 480 pixels.
- Em dispositivos iOS, a segunda coluna é unida se a largura da tela for menor ou igual a 300 pontos.
- Em dispositivos Android, a segunda coluna é unida se a largura da tela for menor ou igual a 320 dp.
O exemplo a seguir mostra um card com um widget columns que apresenta
duas colunas de texto com quatro itens nas colunas. Cada item nas colunas tem
horizontalSizeStyle aplicado para manipular quanto espaço o texto
preenche cada coluna:
- O primeiro parágrafo de texto usa
FILL_MINIMUM_SPACEpara preencher no máximo 30% da largura do card. - O segundo parágrafo de texto usa
FILL_AVAILABLE_SPACEpara preencher o espaço disponível na largura do card. Neste exemplo, ele preenche 70% da largura do cartão. - O terceiro parágrafo de texto não define
horizontalSizeStyle. Portanto, o padrão é preencher o espaço disponível do espaço do card. - O quarto parágrafo de texto usa
FILL_MINIMUM_SPACEpara preencher no máximo 30% da largura do card.
Definir o alinhamento horizontal de uma coluna
Para alinhar os widgets horizontalmente à esquerda, à direita ou ao centro de uma coluna, defina o
campo horizontalAligment.
Se o campo horizontalAlignment for indefinido, os widgets serão alinhados à
esquerda na coluna.
O exemplo a seguir alinha o texto horizontalmente em uma coluna à esquerda:
O exemplo a seguir alinha o texto horizontalmente dentro de uma coluna no centro:
O exemplo a seguir alinha o texto horizontalmente em uma coluna à direita:
Definir o alinhamento vertical de uma coluna
Para alinhar os widgets verticalmente na parte de cima, de baixo ou do centro de uma coluna, defina o
campo verticalAlignment.
Se o campo verticalAlignment estiver indefinido, os widgets em uma coluna serão alinhados
à parte superior.
O exemplo a seguir alinha verticalmente o texto dentro de uma coluna à parte superior:
O exemplo a seguir alinha o texto verticalmente dentro de uma coluna no centro:
O exemplo a seguir alinha o texto verticalmente dentro de uma coluna na parte inferior:
Adicionar um divisor horizontal entre widgets
O
widget divider
mostra uma linha horizontal que abrange a largura de um card
entre widgets empilhados verticalmente. A linha é um divisor visual que ajuda
os usuários a distinguir entre um widget e outro, facilitando a leitura
e compreensão dos cards.
Confira a seguir um card que consiste em widgets divider entre outros tipos de
widgets:
Mostrar uma grade com uma coleção de itens
O
widget grid
mostra uma grade com uma coleção de itens. Uma grade é compatível com qualquer
número de colunas e itens. O número de linhas é determinado por itens divididos por colunas.
Uma grade com 10 itens e 2 colunas tem 5 linhas. Uma grade com 11 itens e 2 colunas tem 6 linhas.
O widget é compatível com sugestões, que ajudam os usuários a inserir dados uniformes, e
ações de mudança, que são
Actions
executadas quando ocorre uma mudança no campo de entrada, como quando um usuário adiciona ou
exclui texto.
O exemplo a seguir é uma grade de duas colunas com um único item:
Definir onde o texto aparece com uma imagem em uma grade
O
campo gridItemLayout
permite definir em cada gridItem, se o texto aparece acima ou abaixo
do item na grade. Se gridItemLayout for indefinido, o texto padrão vai aparecer
abaixo do item na grade
O exemplo a seguir é uma grade de três colunas com texto e uma imagem em cada grade. A primeira grade define que o texto apareça acima da imagem, a segunda grade define a exibição do texto abaixo da imagem e a terceira grade não define a posição do texto.
Adicionar uma borda aos elementos da interface
Para itens que aparecem em um widget column ou grid, você pode adicionar uma borda a
esses elementos da interface definindo um
campo borderType
e um
campo borderStyle.
Se nenhum campo borderStyle for definido, o padrão será não mostrar borda. Você pode definir um borderType para ser aplicado a todos os itens de um widget ou aplicar o estilo a cada item individual em um widget.
O exemplo a seguir é uma grade de duas colunas com uma imagem em cada grade, em que o tipo, o estilo e a cor da borda foram definidos para serem aplicados a todos os itens da grade.
O exemplo a seguir é uma grade de três colunas com uma imagem em cada grade e o estilo e o tipo da borda definidos individualmente. A primeira
imagem tem uma borda definida como STROKE. A segunda imagem tem uma borda definida como
NO_BORDER. A terceira imagem não tem borda definida.
Resolver problemas
Quando um app ou card do Google Chat retorna um erro, a interface do Chat mostra a mensagem "Ocorreu um erro" ou "Não foi possível processar sua solicitação". Às vezes, a interface do Chat não mostra nenhuma mensagem de erro, mas o app ou card do Chat produz um resultado inesperado. Por exemplo, uma mensagem de card pode não aparecer.
Embora uma mensagem de erro não apareça na interface do Chat, mensagens de erro descritivas e dados de registro estão disponíveis para ajudar a corrigir erros quando o registro de erros dos apps do Chat está ativado. Se precisar de ajuda para visualizar, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.
Temas relacionados
columnshorizontalSizeStylehorizontalAligmentverticalAlignmentdividergridgridItemLayoutborderStyleborderType