Dar formato a las tarjetas en Teams

La tabla siguiente proporciona los estilos admitidos para Textblock, Fact.Title y Fact.Value:

No se admiten las siguientes etiquetas Markdown:

• Encabezados
• Tablas
• Imágenes
• Texto con formato previo
• Blockquotes

Nuevas líneas para Tarjetas adaptables

Puede usar las secuencias de escape \r o \n para las nuevas líneas de las listas. Si se utiliza \n\n en las listas, se aplica sangría al siguiente elemento de la lista. Si necesita nuevas líneas en cualquier otra parte del TextBlock, use \n\n.

Diferencias entre dispositivos móviles y de escritorio en Tarjetas adaptables

En el escritorio, el formato de Markdown de Tarjeta adaptable, aparece como se muestra en la siguiente imagen tanto en los exploradores web como en la aplicación cliente de Teams:

En iOS, el formato Markdown de tarjeta adaptable aparece como se muestra en la siguiente imagen:

En Android, el formato de Markdown de Tarjeta adaptable aparece como se muestra en la siguiente imagen:

Para obtener más información sobre el formato de fecha y hora y la localización en tarjetas adaptables, consulta las características de texto en tarjetas adaptables.

Muestra de formato de Tarjetas adaptables

El siguiente código muestra un ejemplo de formato de Tarjetas adaptables:

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "This is some **bold** text"
        },
        {
            "type": "TextBlock",
            "text": "This is some _italic_ text"
        },
        {
            "type": "TextBlock",
            "text": "- Bullet \r- List \r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "1. Numbered\r2. List\r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Check out [Adaptive Cards](https://adaptivecards.microsoft.com/?topic=welcome)"
        }
    ]
}

Las tarjetas adaptables admiten emojis. La siguiente carga de tarjetas muestra una tarjeta adaptable con un emoji:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Publish Adaptive Card with emojis 🥰",
          "weight": "bolder",
          "size": "medium"
        }
      ]
    }
  ]
}

Compatibilidad de las menciones con las Tarjetas adaptables

Puedes agregar @mentions dentro de un cuerpo de tarjeta adaptable para bots y respuestas de extensión de mensaje. Para agregar @mentions tarjetas, siga la misma lógica de notificación y representación que la de las menciones basadas en mensajes en conversaciones de chat grupales y de canal.

Los bots y las extensiones de mensajería pueden incluir menciones en el contenido de la tarjeta en TextBlock y elementos FactSet.

Para incluir una mención en una Tarjeta adaptable, la aplicación debe incluir los siguientes elementos:

• <at>username</at> en los elementos de Tarjeta adaptable compatibles.
• El objeto mention dentro de una propiedad msteams en el contenido de la tarjeta incluye el identificador de usuario de Teams del usuario que se menciona.
• El userId es único para el identificador de bot y un usuario en particular. Se puede usar para @mention un usuario en particular. El userId se puede recuperar mediante una de las opciones mencionadas en obtener el identificador de usuario.

Tarjeta adaptable de ejemplo con una mención

El siguiente código muestra un ejemplo de Tarjeta adaptable con mención:

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi <at>John Doe</at>"
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "msteams": {
      "entities": [
        {
          "type": "mention",
          "text": "<at>John Doe</at>",
          "mentioned": {
            "id": "29:123124124124",
            "name": "John Doe"
          }
        }
      ]
    }
  }
}

Id. de objeto de Microsoft Entra y UPN en la mención de usuario

La plataforma Teams permite mencionar a los usuarios con su identificador de objeto de Microsoft Entra y su nombre principal de usuario (UPN), además de los identificadores de mención existentes. Los bots con Tarjetas adaptables y conectores con Webhooks entrantes admiten los dos id. de mención de usuario.

En la tabla siguiente se describen los id. de mención de usuario que se han admitido recientemente:

Mención de usuario en bots con Tarjetas adaptables

Los bots admiten la mención de usuario con el identificador de objeto de Microsoft Entra y UPN, además de los identificadores existentes. La compatibilidad con dos nuevos id. está disponible en bots para mensajes de texto, cuerpo de Tarjetas adaptables y respuesta de extensión de mensajería. Los bots admiten los id. de mención en escenarios de conversaciones y invoke. El usuario recibe una notificación de la fuente de actividades cuando está @mentioned con los identificadores.

Ejemplo

Ejemplo de mención de usuario en bots con Tarjetas adaptables:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>Adele UPN</at>",
        "mentioned": {
          "id": "AdeleV@contoso.onmicrosoft.com",
          "name": "Adele Vance"
        }
      },
      {
        "type": "mention",
        "text": "<at>Adele Microsoft Entra ID</at>",
        "mentioned": {
          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
          "name": "Adele Vance"
        }
      }
    ]
  }
}

La siguiente imagen ilustra la mención de usuario con la Tarjeta adaptable en bot:

Mención de usuario en Webhook entrante con Tarjetas adaptables

Los webhooks entrantes comienzan a admitir la mención de usuarios en tarjetas adaptables con el identificador de objeto de Microsoft Entra y UPN.

Ejemplo

Ejemplo de mención de usuario en Webhook entrante:

{
    "type": "message",
    "attachments": [
        {
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "TextBlock",
                    "size": "Medium",
                    "weight": "Bolder",
                    "text": "Sample Adaptive Card with User Mention"
                },
                {
                    "type": "TextBlock",
                    "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>"
                }
            ],
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "version": "1.0",
            "msteams": {
                "entities": [
                    {
                        "type": "mention",
                        "text": "<at>Adele UPN</at>",
                        "mentioned": {
                          "id": "AdeleV@contoso.onmicrosoft.com",
                          "name": "Adele Vance"
                        }
                      },
                      {
                        "type": "mention",
                        "text": "<at>Adele Microsoft Entra ID</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

La siguiente imagen ilustra la mención de usuario en Webhook entrante:

Icono de People en una tarjeta adaptable

El icono de People ayuda a los usuarios a ver las imágenes de los usuarios de una tarjeta adaptable. Puede insertar una imagen y aplicar todas las propiedades admitidas en las imágenes.

Hay dos tipos de iconos de personas que se admiten en una tarjeta adaptable:

• Persona: Si desea mostrar un solo usuario en una tarjeta adaptable, se muestra el icono de personas y el nombre del usuario.

  El siguiente código JSON es un ejemplo de una tarjeta Persona:

  {
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0.0",
    "body": [
  {
        "type": "TextBlock",
        "text": "Persona",
        "weight": "bolder"
      },
      {
        "type": "Component",
        "name": "graph.microsoft.com/user",
        "view": "compact",
        "properties": {
          "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
          "displayName": "Daniela Mandera",
          "userPrincipalName": "damandera@microsoft.com"
        }
      }
    ]
  }
  

• Rol Set: Si desea mostrar varios usuarios en una tarjeta adaptable, solo muestra el icono de personas de los usuarios.

  El siguiente código JSON es un ejemplo de un Conjunto de Personas:

  {
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0.0",
    "body": [
      {
        "type": "TextBlock",
        "text": "Persona Set",
        "weight": "bolder"
      },
      {
        "type": "Component",
        "name": "graph.microsoft.com/users",
        "view": "compact",
        "properties": {
          "users": [
            {
              "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
              "displayName": "Daniela Mandera",
              "userPrincipalName": "damandera@microsoft.com"
            },
            {
              "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
              "displayName": "Daniela Mandera",
              "userPrincipalName": "damandera@microsoft.com"
            }
          ]
        }
      }
    ]
  }
  

  Nota:

  No se puede personalizar el estilo de la Persona y del conjunto de Personas en una tarjeta adaptable.

La imagen siguiente es un ejemplo del icono de personas en una tarjeta adaptable:

Esquema

En la tabla siguiente se enumeran las Component propiedades del elemento:

Los componentes adaptables son componentes de alto nivel alimentados por plantillas y elementos de tarjeta adaptativa nativos . El tipo component se puede usar en cualquier lugar dentro del cuerpo de la tarjeta y los datos del componente se definen en el properties atributo. Los datos del componente se properties pasan directamente al componente. La properties propiedad define el formato de Rol y Rol Set y todas las demás propiedades debajo properties se ignoran por component tipo en el esquema de tarjeta adaptable.

El bot puede consultar la lista de miembros y sus perfiles de usuario básicos, incluidos los identificadores de usuario de Teams y la información de Microsoft Entra, como name, idy userPrincipalName. Para obtener más información, vea Capturar la lista o el perfil de usuario.

Las siguientes imágenes muestran el icono de personas en una tarjeta adaptable en clientes móviles y de escritorio de Teams:

Cliente de escritorio:

Cuando un usuario mantiene el puntero sobre un icono de personas, se muestra la tarjeta de personas de ese usuario.

Cliente móvil

Cuando un usuario selecciona un icono de personas, se muestra la tarjeta de personas de ese usuario.

Enmascaramiento de información en Tarjetas adaptables

Use la propiedad de enmascaramiento de información para enmascarar información específica, por ejemplo, contraseñas o información confidencial de los usuarios dentro del elemento de entrada Input.Text de la Tarjeta adaptable.

Para enmascarar información en tarjetas adaptables, agregue la style propiedad a typeinput.text y establezca su valor en Password.

Tarjeta adaptable de ejemplo con propiedad de enmascaramiento

El código siguiente muestra un ejemplo de Tarjeta adaptable con propiedad de enmascaramiento:

{
    "type": "Input.Text",
    "id": "secretThing",
    "style": "password",
},

La siguiente imagen es un ejemplo de enmascaramiento de la información en Tarjetas adaptables:

Tarjeta adaptable de ancho completo

Puedes usar la propiedad para expandir el ancho de una tarjeta adaptativa y aprovechar el msteams espacio adicional del lienzo. En la siguiente sección se proporciona información sobre cómo usar la propiedad.

Crear tarjetas de ancho completo

Para crear una Tarjeta adaptable de ancho completo, el objeto de la propiedad en el contenido de la tarjeta widthmsteams debe establecerse en Full.

Tarjeta adaptable de ejemplo con ancho completo

Para crear una Tarjeta adaptable de ancho completo, la aplicación debe incluir los elementos del siguiente ejemplo de código:

{
    "type": "AdaptiveCard",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": "Digest card",
            "size": "Large",
            "weight": "Bolder"
        }]
    }],

    "msteams": {
        "width": "Full"
    },
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

La siguiente imagen muestra una Tarjeta adaptable de ancho completo:

En la imagen siguiente se muestra la vista predeterminada de una tarjeta adaptable cuando no se ha establecido la width propiedad como Completa:

Tarjeta adaptativa diseño responsivo

Las tarjetas adaptables adaptan automáticamente su apariencia al estilo de la aplicación host, pero tienen un diseño fijo que sigue siendo el mismo en los clientes móviles y de escritorio de Teams. Debe diseñar las tarjetas adaptables para que tengan un aspecto excelente en cualquier dispositivo a fin de proporcionar una experiencia de usuario mejorada en el chat, los canales y el chat de reunión. En este artículo, aprenderás a diseñar tarjetas adaptables con capacidad de respuesta.

El diseño adaptable de la tarjeta adaptable le ayuda a diseñar tarjetas con diferentes diseños destinados a diferentes anchos de tarjeta.

Tarjetas adaptativas adaptables con capacidad de diseño

Use la targetWidth propiedad en cualquier elemento para:

• Mostrar u ocultar cualquier elemento según el ancho de la tarjeta.

• Establezca diferentes anchos de destino en diferentes elementos para crear diferentes diseños.

  En la siguiente tabla se enumeran los valores disponibles targetWidth :

  Valor	Description
  veryNarrow	El elemento es visible cuando el ancho de la tarjeta adaptable es muy reducido, como en un chat de reunión.
  narrow	El elemento es visible cuando el ancho de la tarjeta adaptable es estrecho, como en un teléfono móvil en modo vertical.
  standard	El elemento es visible cuando el ancho de la tarjeta adaptable es estándar, como en un teléfono móvil en modo horizontal, en una tableta en modo vertical o en un chat en un escritorio.
  wide	El elemento está visible cuando el ancho de la tarjeta adaptable es ancho, como en una tableta en modo horizontal, en un canal o chat en el escritorio cuando se establece la tarjeta para que sea de ancho completo.

  También puede establecer la targetWidth propiedad para que un elemento sea visible para un rango de anchos de tarjeta utilizando los atLeast prefijos and atMost . Por ejemplo, puedes hacer que un elemento sea visible solo cuando el ancho de la tarjeta sea "estándar o superior" o solo cuando el ancho de la tarjeta sea "estrecho o inferior". En la tabla siguiente se proporcionan instrucciones sobre cómo hacer visible un elemento para un rango de anchos de tarjeta:

  Ejemplo	Descripción
  "targetWidth": "atLeast:standard"	El elemento es visible solo cuando el ancho de la tarjeta adaptable es al menos estándar, lo que significa estándar o ancho.
  "targetWidth": "atMost:narrow"	El elemento es visible solo cuando el ancho de la tarjeta adaptable es como máximo estrecho, lo que significa muy estrecho o estrecho.

  Nota:

  No tienes que establecer targetWidth todos los elementos. Si no establece targetWidth un elemento, el elemento siempre está visible independientemente del ancho de la tarjeta.

A continuación se muestran ejemplos de JSON para una tarjeta adaptativa diseñada sin usar targetWidth y modificada para usartargetWidth:

• Tarjeta adaptativa diseñada sin usar targetWidth:

  {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "ColumnSet",
        "columns": [
          {
            "type": "Column",
            "items": [
              {
                "type": "Image",
                "style": "Person",
                "url": "https://aka.ms/AAp9xo4",
                "size": "Small"
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "spacing": "medium",
            "verticalContentAlignment": "center",
            "items": [
              {
                "type": "TextBlock",
                "weight": "Bolder",
                "text": "David Claux",
                "wrap": true
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "spacing": "medium",
            "items": [
              {
                "type": "TextBlock",
                "text": "Platform Architect",
                "isSubtle": true,
                "wrap": true
              }
            ],
            "width": "stretch",
            "verticalContentAlignment": "center"
          }
        ]
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
  }
  
  

  En las imágenes siguientes se muestra la representación de la tarjeta adaptable para diferentes anchos de tarjeta:

  • Cuando el ancho de la tarjeta es ancho, la tarjeta se ve bien.

    

  • Cuando el ancho de la tarjeta es estándar o estrecho, el rol se comprime.

    

  • Cuando el ancho de la tarjeta es muy estrecho, el nombre y la función se reducen significativamente.

    

• La tarjeta adaptativa se actualizó para que respondiera mediante targetWidth:

    {
      "type": "AdaptiveCard",
      "body": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "targetWidth": "atLeast:narrow",
              "items": [
                {
                  "type": "Image",
                  "style": "Person",
                  "url": "https://aka.ms/AAp9xo4",
                  "size": "Small"
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "spacing": "medium",
              "verticalContentAlignment": "center",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "David Claux",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "targetWidth": "atMost:narrow",
                  "spacing": "None",
                  "text": "Platform Architect",
                  "isSubtle": true,
                  "wrap": true
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "targetWidth": "atLeast:standard",
              "spacing": "medium",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Platform Architect",
                  "isSubtle": true,
                  "wrap": true
                }
              ],
              "width": "stretch",
              "verticalContentAlignment": "center"
            }
          ]
        }
      ],
      "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.5"
    }
  

  Veamos cómo se representa la misma tarjeta adaptable después de usar la targetWidth propiedad para diferentes anchos de tarjeta:

  • Cuando el ancho de la tarjeta es ancho, la tarjeta todavía se ve bien.

    

  • Cuando el ancho de la tarjeta es estándar o estrecho, el rol se mueve debajo del nombre, ya que no hay espacio horizontal para mostrarlos en paralelo.

    

  • Cuando el ancho de la tarjeta es muy estrecho, podemos ocultar la imagen y solo mantener la información más significativa.

    

Para obtener más información sobre cómo diseñar una tarjeta adaptable, consulte Diseño de tarjetas adaptables para la aplicación de Teams.

Compatibilidad con TypeAhead

Dentro del elemento de esquema Input.ChoiceSet, pedir a los usuarios que filtren y seleccionen un número considerable de opciones puede ralentizar de manera significativa la finalización de tareas. La compatibilidad con TypeAhead en Tarjetas adaptables puede simplificar la selección de entrada limitando o filtrando el conjunto de opciones de entrada a medida que el usuario escribe la entrada.

Para habilitar TypeAhead en Input.Choiceset, establezca style en filtered y asegúrese de que isMultiSelect está establecido en false.

Tarjeta adaptable de ejemplo con compatibilidad con TypeAhead

En el siguiente código se muestra un ejemplo de Tarjeta adaptable con compatibilidad con TypeAhead:

{
   "type": "Input.ChoiceSet",
   "label": "Select a user",
   "isMultiSelect": false,
   "choices":  [
      { "title": "User 1", "value": "User1" },
      { "title": "User 2", "value": "User2" }
    ],
   "style": "filtered"
}

Vista en pantalla para imágenes en tarjetas adaptables

En una tarjeta adaptable, puede usar la msteams propiedad para agregar la capacidad de mostrar imágenes en Stageview de forma selectiva. Cuando los usuarios mantienen el puntero sobre las imágenes, pueden ver un icono de expandir, para el que el atributo allowExpand está establecido en true. El código siguiente es un ejemplo de la msteams propiedad:

{
    "type": "AdaptiveCard",
     "body": [
          {
            "type": "Image",
            "url": "https://picsum.photos/200/200?image=110",
            "msTeams": {
              "allowExpand": true
            }
          }
     ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

Cuando los usuarios pasan el ratón por encima de la imagen, aparece un icono de expandir en la esquina superior derecha, tal y como se muestra en la siguiente imagen:

La imagen aparece en vista Stageview cuando el usuario selecciona el icono de expandir, como se muestra en la siguiente imagen:

En Stageview, los usuarios pueden acercar y alejar la imagen. Puede seleccionar las imágenes de la Tarjeta adaptable que han de llevar esta funcionalidad.

Las tarjetas de conector admiten formato Markdown y HTML limitado.

Estilo	Ejemplo	Markdown
Negrita	text	**text**
Italic	text	*text*
Encabezado (niveles 1-3)	Texto	### Text
Tachado	text	~~text~~
Lista no ordenada	text text	- Item 1\r- Item 2\r- Item 3
Lista ordenada	text text	1. Green\r2. Orange\r3. Blue
Texto con formato previo	text	preformatted text
Blockquote	>texto de comillas en bloque	>blockquote text
Hyperlink	Bing	[Bing](https://www.bing.com/)
Vínculo de imagen		

En las tarjetas de conector, las líneas nuevas se representan para \n\n, pero no para \n o \r.

Diferencias entre dispositivos móviles y de escritorio en tarjetas de conector

En el escritorio, el formato Markdown para tarjetas de conector aparece como se muestra en la siguiente imagen:

En iOS, el formato Markdown para tarjetas de conector aparece como se muestra en la siguiente imagen:

Las tarjetas de conector que usan Markdown para iOS muestran los siguientes problemas:

• El cliente de iOS para Teams no representa imágenes en línea Markdown o HTML en tarjetas de conexión.
• Los Blockquotes se representan como sangría pero sin un fondo gris.

En Android, el formato Markdown para tarjetas de conector aparece como se muestra en la siguiente imagen:

Ejemplo de formato para tarjetas de conector de Markdown

El siguiente código muestra un ejemplo de formato para tarjetas de conector Markdown:

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card Markdown formatting",
    "sections": [
        {
            "text": "This is some **bold** text"
        },
        {
            "text": "This is some _italic_ text"
        },
        {
            "text": "# Header 1\r## Header 2\r### Header 3"
        },
        {
            "text": "- Bullet \r- List \r"
        },
        {
            "text": "1. Numbered\r1. List \r"
        },
        {
            "text": "Link: [Bing](https://www.bing.com)"
        },
        {
            "text": "embedded image link: ![Duck on a rock](https://aka.ms/Fo983c)"
        },
        {
            "text": "`preformatted text`"
        },
        {
            "text": "Newlines (backslash n, backslash n):\n\nline a\n\nline b\n\nline c"
        },
        {
            "text": ">This is a blockquote"
        }
     ]
  }
}

Cuando un usuario selecciona el menú de desbordamiento en un escritorio, los botones que están configurados como secundarios aparecen en la tarjeta adaptable.

Cuando un usuario selecciona el menú de desbordamiento en un dispositivo móvil, la tarjeta adaptativa muestra los botones definidos. Hay una hoja integrada que muestra un menú adicional con tareas relacionadas con la tarjeta con una opción de mensaje. Una pulsación larga en cualquier mensaje muestra una lista de mensajes relacionados. Esta opción solo está disponible para acciones.

Las tarjetas de conector admiten formato Markdown y HTML limitado.

Estilo	Ejemplo	HTML
Negrita	text	<strong>text</strong>
Italic	text	<em>text</em>
Encabezado (niveles 1-3)	Texto	<h3>Text</h3>
Tachado	text	<strike>text</strike>
Lista no ordenada	text text	<ul><li>text</li><li>text</li></ul>
Lista ordenada	text text	<ol><li>text</li><li>text</li></ol>
Texto con formato previo	text	<pre>text</pre>
Blockquote	text	<blockquote>text</blockquote>
Hyperlink	Bing	<a href="https://www.bing.com/">Bing</a>
Vínculo de imagen		<img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

En las tarjetas de conector, las líneas nuevas se representan en HTML mediante la etiqueta <p>.

Diferencias entre dispositivos móviles y de escritorio en tarjetas de conector

En el escritorio, el formato HTML para tarjetas de conector aparece como se muestra en la siguiente imagen:

En iOS, el formato HTML aparece como se muestra en la siguiente imagen:

Las tarjetas de conector que usan HTML para iOS muestran los siguientes problemas:

• Las imágenes en línea no se representan en iOS con Markdown o HTML en tarjetas de conexión.
• El texto con formato previo se representa, pero no tiene un fondo gris.

En Android, el formato HTML aparece como se muestra en la siguiente imagen:

Ejemplo de formato para tarjetas de conector HTML

El siguiente código muestra un ejemplo de formato para tarjetas de conector HTML:

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card HTML formatting",
    "sections": [
        {
            "text": "This is some <strong>bold</strong> text"
        },
        {
            "text": "This is some <em>italic</em> text"
        },
        {
            "text": "This is some <strike>strikethrough</strike> text"
        },
        {
            "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
        },
        {
            "text": "bullet list <ul><li>text</li><li>text</li></ul>"
        },
        {
            "text": "ordered list <ol><li>text</li><li>text</li></ol>"
        },
        {
            "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
        },
        {
            "text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
        },
        {
            "text": "preformatted text <pre>text</pre>"
        },
        {
            "text": "Paragraphs <p>Line a</p><p>Line b</p>"
        },
        {
            "text": "<blockquote>Blockquote text</blockquote>"
        }
     ]
  }
}

Las etiquetas HTML son compatibles con tarjetas sencillas, como las tarjetas de miniatura y de elemento principal. Markdown no es compatible.

Estilo	Ejemplo	HTML
Negrita	text	<strong>text</strong>
Italic	text	<em>text</em>
Encabezado (niveles 1-3)	Texto	<h3>Text</h3>
Tachado	text	<strike>text</strike>
Lista no ordenada	text text	<ul><li>text</li><li>text</li></ul>
Lista ordenada	text text	<ol><li>text</li><li>text</li></ol>
Texto con formato previo	text	<pre>text</pre>
Blockquote	text	<blockquote>text</blockquote>
Hyperlink	Bing	<a href="https://www.bing.com/">Bing</a>
Vínculo de imagen		<img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

Diferencias entre dispositivos móviles y de escritorio en tarjetas sencillas

Dado que existen diferencias de resolución entre la plataforma móvil y de escritorio, el formato es diferente entre la versión de escritorio y la versión móvil de Teams.

En el escritorio, el formato HTML aparece como se muestra en la siguiente imagen:

En iOS, el formato HTML aparece como se muestra en la siguiente imagen:

El formato de caracteres, como negrita y cursiva, no se representa en iOS.

En Android, el formato HTML aparece como se muestra en la siguiente imagen:

El formato de caracteres, como negrita y cursiva, se muestra correctamente en Android.

Ejemplo de formato para tarjetas sencillas

Puede probar el formato de sus propias tarjetas modificando este código, donde la propiedad text de una tarjeta de héroe se establece en la siguiente cadena:

<p>bold: <strong>Bold Text</strong></p><p>italic: <em>Italic Text</em></p><p>strikethrough: <strike>Strikethrough text</strike></p><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><p>bullet list: <ul><li>text</li><li>text</li></ul></p><p>ordered list: <ol><li>text</li><li>text</li></ol></p><pre>preformatted text</pre><blockquote>blockquote text</blockquote></p><p>hyperlink: <a href=\"https://www.bing.com/\">Bing</a></p><p>embedded image: <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img></p>