Compartir a través de

Tarjetas

  • Artículo

Una tarjeta es un contenedor de interfaz de usuario (UI) para información breve o relacionada. Las tarjetas pueden tener diversas propiedades y datos adjuntos y pueden incluir botones para activar las acciones de las tarjetas. Con las tarjetas, puede organizar la información en grupos y dar a los usuarios la oportunidad de interactuar con partes específicas de la información.

Los bots de Microsoft Teams admiten los siguientes tipos de tarjetas:

  • Tarjeta adaptable
  • Tarjeta de héroe
  • Tarjeta de lista
  • Tarjeta del conector para Grupos de Microsoft 365
  • Tarjeta de recibo
  • Tarjeta de inicio de sesión
  • Tarjeta miniatura
  • Colecciones de tarjetas
  • Menú Desbordamiento en tarjetas adaptables

Puede agregar formato de texto enriquecido a las tarjetas mediante Markdown o HTML, según el tipo de tarjeta. Tarjetas usadas por bots y extensiones de mensaje en Teams, agregue y responda a estas acciones de tarjeta, openUrl, messageBack, imBack, invokey signin.

Teams usa tarjetas en tres lugares diferentes:

  • Conectores
  • Bots
  • Extensiones de mensajería

Tarjetas en conectores

Las tarjetas se definieron por primera vez como parte de Outlook y Microsoft 365 y ahora se usan como parte de los conectores para Grupos de Microsoft 365. Al igual que muchas aplicaciones de Microsoft 365, Teams admite conectores. Para obtener más información, consulte Creación de conectores para Grupos de Microsoft 365. Puede encontrar la especificación de las tarjetas en conectores en referencia de tarjeta de mensaje de acción.

Tarjetas en bots

El Microsoft Bot Framework amplía la especificación de tarjetas agregando un conjunto de tarjetas predefinidas que los bots pueden usar como parte de los mensajes de bot. Teams admite bots que usan el Bot Framework, pero admite un conjunto diferente de estas tarjetas. La información general sobre las tarjetas de Bot Framework se puede encontrar en agregar datos adjuntos de tarjetas enriquecidas a mensajes. Estas tarjetas se denominan tarjetas sencillas en Teams.

Los bots de Teams pueden usar tarjetas sencillas, tarjetas de conector o tarjetas adaptables. Tipos de tarjetas proporciona información sobre las tarjetas compatibles con bots en Teams.

Tarjetas en extensiones de mensajería

Las extensiones de mensajería también pueden entregar una tarjeta. Las extensiones de mensajería pueden usar tarjetas simples, tarjetas de conector o Tarjetas adaptables. Estas tarjetas se encuentran en tipos de tarjetas.

Tipos de tarjetas

Todas las tarjetas usadas por Teams se enumeran en tipos de tarjetas. Esta referencia también describe las diferencias entre las tarjetas de Bot Framework y las tarjetas en Teams.

Tarjetas adaptables

Las tarjetas adaptables son una nueva especificación entre productos para tarjetas en productos de Microsoft, incluidos bots, Cortana, Outlook y Windows. Son el tipo de tarjeta recomendado para el nuevo desarrollo de Teams. Para obtener información general del equipo de tarjetas adaptables, consulte Información general sobre tarjetas adaptables adaptable. Puede usar tarjetas adaptables en cualquier lugar donde use las tarjetas principales existentes, las tarjetas de Microsoft 365 y las tarjetas en miniatura.

Además de las tarjetas adaptables, Teams admite otros dos tipos de tarjetas:

  • Tarjetas de conector: se usan como parte de conectores para Grupos de Microsoft 365.
  • Tarjetas sencillas: se usan desde el Bot Framework, como las tarjetas de miniatura y las tarjetas de héroe.

Selector de usuarios en Tarjetas adaptables

El selector de usuarios agregado como control de entrada en Tarjetas adaptables habilita la búsqueda y la selección de usuarios. Puede usarlo en chats, canales, diálogos (denominados módulos de tareas en TeamsJS v1.x) y pestañas. Los clientes móviles y de escritorio admiten el selector de usuarios, lo que proporciona una experiencia de escritura en línea.

icono de Personas en una tarjeta adaptable

Personas icono de una tarjeta adaptable ayuda a los usuarios a ver las imágenes de los usuarios en la tarjeta adaptable de Teams. Puede ver la imagen de un solo usuario o varios usuarios. Personas icono se admite en los clientes móviles y de escritorio de Teams.

Búsqueda de escritura anticipada en Tarjetas adaptables

La búsqueda de encabezados de tipo agregada como un control de entrada en tarjetas adaptables habilita la experiencia de búsqueda dinámica desde un conjunto de datos cargado dinámicamente. También permite a los usuarios realizar una búsqueda estática de tipoahead dentro de una lista con un número limitado de opciones. Los clientes móviles y de escritorio admiten la experiencia de búsqueda dinámica de typeahead.

Entradas dependientes en tarjetas adaptables

Puede diseñar tarjetas adaptables en Teams donde el valor de una entrada depende del valor de otra. Por ejemplo, considere una tarjeta adaptable con dos Input.ChoiceSet listas desplegables: una para seleccionar un país y otra para seleccionar una ciudad específica dentro de ese país. La primera lista desplegable debe filtrar las ciudades mostradas en la segunda lista desplegable. Esto se puede lograr mediante la creación de una Input.ChoiceSet lista desplegable con una búsqueda de typeahead dinámica que depende de una o más entradas en la tarjeta. Para obtener más información, consulte entradas dependientes.

Elementos multimedia en tarjetas adaptables

Los elementos multimedia de la tarjeta adaptable proporcionan una experiencia multimedia mejorada y aumentan la interacción con la tarjeta adaptable. Puedes agregar archivos multimedia como clips de audio o vídeo, vídeos de YouTube, Vimeo o Dailymotion a tu tarjeta adaptable. Para obtener más información, vea Elementos multimedia en tarjeta adaptable.

Tarjetas adaptables y webhooks entrantes

Nota:

Las tarjetas adaptables con webhooks entrantes permiten usar las funcionalidades enriquecidas y flexibles de las tarjetas adaptables. Envía datos mediante webhooks entrantes en Teams desde su servicio web.

CodeBlock en tarjetas adaptables

Comparta fragmentos de código como tarjetas adaptables con formato enriquecido en chats, canales y reuniones de Teams con el CodeBlock elemento . Las tarjetas adaptables con el CodeBlock elemento facilitan la lectura del fragmento de código, ya que la sangría, la numeración y el resaltado de sintaxis coinciden con el lenguaje de programación. Para obtener más información, vea CodeBlock en tarjetas adaptables.

Diseño con capacidad de respuesta de tarjeta adaptable

Debe diseñar las tarjetas adaptables para que se vean bien en cualquier dispositivo para proporcionar una experiencia de usuario mejorada en chats, canales y chats de reuniones. El diseño con capacidad de respuesta de tarjeta adaptable le ayuda a diseñar tarjetas con diferentes diseños que tienen como destino diferentes anchos de tarjeta. Para obtener más información, vea Diseño adaptable de tarjeta adaptable.

Bordes y esquinas redondeadas

Puede agregar bordes a los Containerelementos , ColumnSet, Columny Table en tarjetas adaptables para delinear diferentes secciones de la tarjeta. Puede agregar esquinas redondeadas a los Containerelementos , ColumnSet, Column, Tabley Image en tarjetas adaptables para que el diseño de la tarjeta tenga un aspecto moderno y visualmente atractivo. Para obtener más información, vea bordes y esquinas redondeadas en Tarjetas adaptables.

Contenedores desplazables

Un contenedor con muchos elementos podría dar lugar a una tarjeta larga e ilegible. Use la maxHeight propiedad para definir el alto máximo del contenedor. Cuando el contenedor tiene un alto máximo y su contenido supera ese alto, aparece una barra de desplazamiento vertical. Para obtener más información, vea contenedores desplazables en tarjetas adaptables.

Botón compuesto

El botón compuesto es un tipo especial de botón con un icono, un título y una descripción. Puede agregar un botón Compuesto mediante el CompoundButton elemento . Este elemento le permite replicar la apariencia de los inicios de aviso en una tarjeta adaptable. Para obtener más información, vea Botón compuesto en Tarjetas adaptables.

Iconos de Fluent

Las tarjetas adaptables admiten la adición de iconos de la biblioteca de iconos de Fluent mediante el Icon elemento . Para obtener más información, vea iconos en Tarjeta adaptable.

Clasificaciones de estrellas

Puede agregar una entrada de clasificación de star a la tarjeta adaptable mediante el Input.Rating elemento . También puede incluir una clasificación de solo lectura star mediante el Rating elemento . Para obtener más información, vea Clasificaciones en tarjetas adaptables.

Habilitación condicional de botones de acción

Puede usar la conditionallyEnabled propiedad para deshabilitar los botones de acción hasta que el usuario cambie el valor de al menos una de las entradas necesarias. Esta propiedad solo se puede usar con Action.Submit acciones y Action.Execute . Para obtener más información, consulte habilitación condicional de botones de acción.

Menú Desbordamiento en tarjetas adaptables

La tarjeta adaptable en Teams admite el menú de desbordamiento. Puede rellenar un menú de desbordamiento para todas las acciones secundarias de una tarjeta adaptable.

Compatibilidad con Microsoft Entra id. de objeto y UPN en la mención del usuario

Los bots con tarjetas adaptables admiten identificadores de mención de usuario, como Microsoft Entra id. de objeto y nombre principal de usuario (UPN), además de los identificadores existentes. Los webhooks entrantes comienzan a admitir la mención del usuario en la tarjeta adaptable con el identificador de objeto Microsoft Entra y el UPN.

Gráficos en tarjetas adaptables

Los bots admiten identificadores de mención de usuario, como Microsoft Entra id. de objeto y nombre principal de usuario (UPN), además de los identificadores existentes. Los webhooks entrantes comienzan a admitir la mención del usuario en la tarjeta adaptable con el identificador de objeto Microsoft Entra y el UPN.

Diseños de contenedor en tarjetas adaptables

Puede diseñar contenedores con capacidad de respuesta para diferentes anchos de tarjeta adaptable con los Layout.Stackdiseños , Layout.Flowy Layout.AreaGrid . Para obtener más información, vea Diseños de contenedor.

Paso siguiente

Tipos de tarjetas

Vea también