Форматирование карточек в TeamsFormat cards in Teams

В зависимости от типа карты в карточки можно добавлять форматированный текст в карточки с помощью Markdown или HTML.You can add rich text formatting to your cards using either Markdown or HTML, depending on the card type.

Карточки поддерживают форматирование только в свойстве Text, а не в свойствах Title и субтитров.Cards support formatting in the text property only, not in the title or subtitle properties. Форматирование можно указать с помощью подмножества форматирования XML (HTML) или Markdown в зависимости от типа карты.Formatting can be specified using a subset of XML (HTML) formatting, or Markdown depending on card type. Для текущих и будущих развертываний рекомендуется использовать форматирование Markdown.For current and future development Adaptive cards using Markdown formatting is recommended.

Поддержка форматирования различается для разных типов карточек, а отображение карты может незначительно отличаться между настольным компьютером и мобильными клиентами Teams, а также с Teams в браузере настольного компьютера.Formatting support differs between different card types, and rendering of the card can differ slightly between the desktop and the mobile Teams clients, as well as Teams in the desktop browser.

Встроенное изображение можно добавить с помощью любой карточки Teams.You can include an inline image with any Teams card. Изображения в формате " .png ," .jpg или " .gif файлы" не должны превышать 1024 × 1024 px или 1 МБ.Images an be formatted as .png, .jpg, or .gif files and must not exceed 1024 ×1024 px or 1 MB. Анимированный GIF-файл не поддерживается официально.Animated GIF is not officially supported. См . Справочник по карточкамSee Cards reference

Форматирование карточек с помощью MarkdownFormatting cards with Markdown

Существует два типа карточек, поддерживающих Markdown в teams:There are two card types that support Markdown in Teams:

  • Адаптивные карты: Markdown поддерживается в поле адаптивной карточки Textblock , а также Fact.Title и Fact.Value .Adaptive Cards: Markdown is supported in Adaptive Card Textblock field, as well as Fact.Title and Fact.Value. HTML не поддерживается в адаптивных картах.HTML is not supported in adaptive cards.
  • Соединительные карты O365: Markdown и ограниченный HTML-код поддерживаются в карточках соединителей Office 365 в текстовых полях.O365 Connector Cards: Markdown and limited HTML is supported in Office 365 Connector cards in the text fields.

Поддерживаются следующие стили Textblock Fact.Title Fact.Value :The supported styles for Textblock, Fact.Title and Fact.Value are:

StyleStyle ПримерExample MarkdownMarkdown
boldbold BoldBold **Bold**
italicitalic ItalicItalic _Italic_
неупорядоченный списокunordered list
  • текстtext
  • текстtext
- Item 1\r- Item 2\r- Item 3
упорядоченный списокordered list
  1. текстtext
  2. текстtext
1. Green\r2. Orange\r3. Blue
ГиперссылкиHyperlinks BingBing [Title](url)

Следующие теги Markdown не поддерживаются:The following Markdown tags are not supported:

  • ЗаголовкиHeaders
  • ТаблицыTables
  • ИзображенияImages
  • Предварительно отформатированный текстPreformatted text
  • блокккуотесBlockquotes

Важно!

Адаптивные карты не поддерживают форматирование HTML.Adaptive cards do not support HTML formatting.

Строки для адаптивных карточекNewlines for Adaptive Cards

В списках можно использовать \r \n последовательности или escape-последовательности для новой строки.In lists you can use the \r or \n escape sequences for newlines. Использование \n\n в списке приводит к тому, что следующий элемент в списке будет иметь отступы.Using \n\n in a list will cause the next element in the list to be indented. Если в элементе TextBlock требуются строки новой строки, используйте \n\n .If you need newlines elsewhere in the textblock, use \n\n.

Различия между мобильными и настольными компьютерами для адаптивных картMobile and desktop differences for Adaptive Cards

Форматирование слегка отличается между настольными и мобильными версиями Teams.Formatting is slightly different between the desktop and the mobile versions of Teams.

На рабочем столе Адаптивное форматирование карточки Markdown выглядит так же, как в веб-браузерах и в клиентском приложении teams:On the desktop, Adaptive Card Markdown formatting appears like this in both web browsers and in the Teams client application:

Адаптивное форматирование карточки Markdown в клиенте для настольных ПК

В iOS форматирование адаптивной карточки Markdown выглядит следующим образом:On iOS, Adaptive Card Markdown formatting appears like this:

Адаптивное форматирование карточки Markdown в iOS

В Android Адаптивное форматирование карточки Markdown выглядит следующим образом:On Android, Adaptive Card Markdown formatting appears like this:

Адаптивное форматирование карточки Markdown в Android

Дополнительные сведения о адаптивных картахMore information on Adaptive Cards

Функции для текста в адаптивных карточках Функции даты и локализации, упомянутые в этом разделе, не поддерживаются в Teams.Text features in Adaptive cards The date and localization features mentioned in this topic are not supported in Teams.

Пример форматирования для адаптивных карточекFormatting sample for Adaptive cards

{
    "$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.io)"
        }
    ]
}

Упоминание поддержки в адаптивных картах версии 1.2Mention support within Adaptive cards v1.2

Упоминания на основе карточек поддерживаются в веб-, настольных и мобильных клиентах.Card based mentions are supported in Web, Desktop and mobile clients. Вы можете добавлять @ упоминания в тексте адаптивной карточки для Боты и расширений обмена сообщениями.You can add @ mentions within an adaptive card body for bots and messaging extension responses. Чтобы добавить @ упоминания в карточки, следуйте той же логике уведомлений и отрисовки, что и в упомянутых сообщениях в беседах канала и группового чата.To add @ mentions in cards, follow the same notification logic and rendering as that of message based mentions in channel and group chat conversations.

Расширения Боты и обмена сообщениями могут включать упоминание в содержимом карточки в элементах TextBlock и в элементах фактов .Bots and messaging extensions can include mentions within the card content in TextBlock and FactSet elements.

Примечание

  • В настоящее время элементы мультимедиа в настоящее время не поддерживаются в адаптивных картах версии 1.2 на платформе Teams.Media elements are currently not supported in Adaptive cards v1.2 on the Teams platform.
  • Упоминание каналов & участников группы не поддерживаются в сообщениях Bot.Channel & Team mentions are not supported in bot messages.

Создание упоминанийConstructing mentions

Чтобы включить в адаптивную карточку упоминание, необходимо, чтобы приложение включало следующие элементы:To include a mention in an Adaptive Card your app needs to include the following elements

  • <at>username</at> в поддерживаемых элементах адаптивной карточки<at>username</at> in the supported adaptive card elements
  • mentionОбъект внутри msteams свойства в содержимом карточки, включающий идентификатор пользователя Teams для указанного пользователя.The mention object inside of an msteams property in the card content, which includes the Teams user id of the user being mentioned

Пример адаптивной карточки с упоминаниемSample Adaptive card with a mention

{
  "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"
          }
        }
      ]
    }
  }
}

Форматирование карточек с помощью HTMLFormatting cards with HTML

Карты соединителей поддерживают ограниченные Markdown и форматирование HTML.Connector cards support limited Markdown and HTML formatting. Markdown описывается в следующем разделе.Markdown is described in the next section.

StyleStyle ПримерExample HTMLHTML
boldbold texttext <strong>text</strong>
italicitalic texttext <em>text</em>
Верхний колонтитул (уровни 1 – 3)header (levels 1–3) TextText <h3>Text</h3>
strikethroughstrikethrough texttext <strike>text</strike>
неупорядоченный списокunordered list
  • текстtext
  • текстtext
<ul><li>text</li><li>text</li></ul>
упорядоченный списокordered list
  1. текстtext
  2. текстtext
<ol><li>text</li><li>text</li></ol>
предварительно отформатированный текстpreformatted text text <pre>text</pre>
blockquoteblockquote
текстtext
<blockquote>text</blockquote>
гиперссылкаhyperlink BingBing <a href="https://www.bing.com/">Bing</a>
Ссылка на изображениеimage link Duck on a rock <img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

В соединительных карточках строки новой строки отображаются в HTML-коде с помощью <p> тега.In connector cards, newlines are rendered in HTML using the <p> tag.

Различия между мобильными и рабочими столами для соединителей карт с помощью HTMLMobile and desktop differences for connector cards using HTML

На рабочем столе форматирование HTML-карт для соединителей выглядит следующим образом:On the desktop, HTML formatting for connector cards looks like this:

Формат HTML для соединителей карт в клиенте для настольных ПК

В iOS форматирование HTML выглядит следующим образом:On iOS, HTML formatting looks like this:

Формат HTML для соединителей карт в клиенте iOS

Вопросы:Issues:

  • Встроенные изображения не отправляются на iOS с помощью Markdown или HTML в соединительных карточках.Inline images are not rendered on iOS using either Markdown or HTML in Connector Cards.
  • Предварительно отформатированный текст отображается, но не является серым фоном.Preformatted text is rendered but does not have a gray background.

На Android форматирование HTML выглядит следующим образом:On Android, HTML formatting looks like this:

Форматирование HTML-карт для соединителей в клиенте Android

Пример форматирования для карточек соединителей HTMLFormatting sample for HTML Connector Cards

{
  "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>"
        }
     ]
  }
}