Interfaces baseadas em cartão

Exemplo de card de complemento

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

Cada card representa uma 'página' específica da interface do complemento, e navegar até um novo card geralmente é apenas uma questão de criar esse card e enviar para uma pilha interna de cards. Você pode definir fluxos de navegação entre cards para uma experiência de interação rica.

Os cards podem ser não contextuais ou contextuais. Os cards contextuais 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 do Google Agenda. 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 está conferindo a caixa de entrada do Gmail, a pasta principal do Drive ou o Google Agenda.

Os complementos do Google Workspace criados no Apps Script usam o serviço de cards para criar interfaces do usuário com base em cards. Os complementos criados em outros idiomas precisam retornar JSON formatado corretamente para que a interface seja renderizada como cards.

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

As interfaces baseadas em cards têm os seguintes benefícios:

  • Não é necessário ter conhecimento de HTML ou CSS para criar interfaces baseadas em cards.
  • Os cards e widgets são estilizados automaticamente para funcionarem bem com os aplicativos do Google Workspace que eles estendem.
  • As interfaces baseadas em cards 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 cards, é importante entender alguns conceitos e padrões de design. Os guias a seguir fornecem as informações necessárias para criar complementos eficazes com base em cards:

Consulte estas páginas ao criar cards e implementar o comportamento da interface. Você também pode usar as amostras a seguir como referência ao implementar seu complemento: