Interfaces baseadas em cards

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Exemplo de card de complementos

Os complementos do Google Workspace apresentam informações e controles de usuários na barra lateral da IU do aplicativo host. Um complemento consiste em uma barra de ferramentas de identificação principal com um ou mais cards.

Cada cartão representa uma determinada página da IU de complementos e navegar para um novo cartão geralmente é importante para criar esse cartão e enviá-lo para uma pilha de cartões interna. Você pode definir fluxos de navegação entre os cards para uma experiência avançada de interação.

Os cards podem ser não contextuais ou contextuais. Os cards de contexto são apresentados ao usuário quando o aplicativo host está em um contexto específico. Por exemplo, ao abrir uma mensagem do Gmail ou um evento da Agenda. Os cards não contextuais (como páginas iniciais) são apresentados ao usuário fora de um contexto específico do host. Por exemplo, quando o usuário visualiza a caixa de entrada do Gmail, a pasta principal do Drive ou a agenda.

Os complementos do Google Workspace criados no Apps Script usam o serviço de Card para criar interfaces do usuário usando cards. Complementos criados em outras linguagens precisam retornar o JSON formatado corretamente para que a interface seja renderizada como cartões.

Cada card consiste em um cabeçalho e uma ou mais seções de cards. Cada seção é composta por um conjunto de widgets. Os widgets exibem informações para o usuário ou fornecem controles de interação, como botões.

As interfaces baseadas em cartões têm os seguintes benefícios:

  • Não é necessário ter conhecimento de HTML ou CSS para criar interfaces baseadas em cartões.
  • Os cards e widgets são estilizados automaticamente para funcionar bem com os aplicativos do Google Workspace estendidos.
  • As interfaces baseadas em cartões funcionam em computadores e dispositivos móveis, mas você só precisa definir a interface uma vez.

Como criar interfaces baseadas em cards

Ao criar complementos baseados em cartões, é importante entender determinados conceitos e padrões de design. Os guias a seguir oferecem as informações necessárias para criar complementos eficazes baseados em cartões:

Consulte essas páginas ao criar cards e implementar o comportamento da IU. Os exemplos adicionais a seguir são úteis para referência ao implementar seu complemento: