Interfaces basadas en tarjetas

Ejemplo de tarjeta de complemento

Los complementos de Google Workspace presentan información y usuarios controles en la barra lateral del aplicación host de la IU de Google. Un complemento consiste en una barra de herramientas de identificación principal junto con uno o más elementos tarjetas.

Cada tarjeta representa una "página" en particular de la IU de tu complemento navegar a una tarjeta nueva suele ser solo un es cuestión de crear una tarjeta y y colocarla en una pila de tarjetas interna. Puedes definir los flujos de navegación entre tarjetas para ofrecer una experiencia de interacción enriquecida.

Las tarjetas pueden ser no contextuales o contextuales. Se presentan tarjetas contextuales al usuario cuando la aplicación host se encuentra en un contexto específico. Por ejemplo: cuando abres un mensaje de Gmail o un evento del Calendario. Tarjetas no contextuales (como páginas principales) se presentan al usuario fuera de un contexto específico del host. Por ejemplo, cuando el usuario es viendo la carpeta Recibidos de Gmail, la carpeta principal de Drive o el Calendario.

Los complementos de Google Workspace integrados en Apps Script usan el Servicio de tarjetas para crear interfaces de usuario a partir de tarjetas. Complementos integrados en otros lenguajes debe mostrar JSON con el formato correcto para que la interfaz se renderice como tarjetas.

Cada tarjeta consta de un encabezado y una o más secciones de tarjetas. Cada sección Se componen de un conjunto de widgets. Widgets mostrar información al usuario o proporcionar controles de interacción, como botones.

Las interfaces basadas en tarjetas tienen los siguientes beneficios:

  • No es necesario tener conocimientos de HTML ni CSS para crear interfaces basadas en tarjetas.
  • El estilo de las tarjetas y los widgets se ajusta automáticamente para que funcionen bien con el las aplicaciones de Google Workspace que extienden.
  • Las interfaces basadas en tarjetas funcionan en computadoras y dispositivos móviles, pero solo tendrás que definir la interfaz una vez.

Crea interfaces basadas en tarjetas

Cuando crees complementos basados en tarjetas, es importante comprender ciertos conceptos y patrones de diseño. En las siguientes guías, se proporciona la información necesitas crear complementos eficaces basados en tarjetas:

Consulta estas páginas cuando crees tarjetas e implementes Comportamiento de la IU. Las siguientes muestras adicionales también pueden resultarte útiles referencia cuando implementes tu complemento: