Partilhar via

Introdução

Um Adaptive Card é um modelo de objeto de cartão serializado por JSON.

Estrutura adaptativa do cartão

A estrutura básica de um cartão é a seguinte:

  • AdaptiveCard - O objeto raiz descreve o próprio AdaptiveCard, incluindo a sua composição de elementos, as suas ações, como deve ser pronunciado e a versão do esquema necessária para o renderizar.
  • body - O corpo do cartão é composto por blocos de construção conhecidos como elements. Os elementos podem ser compostos em arranjos quase infinitos para criar muitos tipos de cartas.
  • actions - Muitos cartões têm um conjunto de ações que um usuário pode tomar sobre ele. Esta propriedade descreve as ações que normalmente são renderizadas em uma "barra de ação" na parte inferior.

Exemplo de cartão

Este cartão de exemplo que inclui uma única linha de texto seguida por uma imagem.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Type propriedade

Cada elemento tem uma type propriedade que identifica que tipo de objeto é. Olhando para o cartão acima, você pode ver que temos dois elementos, um TextBlock e um Image.

Todos os elementos do Adaptive Card são empilhados verticalmente e expandem-se para a largura do elemento pai (como em display: block no HTML). No entanto, você pode usar a ColumnSet para criar colunas lado a lado de contêineres.

Elementos adaptativos

Os elementos mais fundamentais são:

  • TextBlock - adiciona um bloco de texto com propriedades para controlar a aparência do texto
  • Imagem - adiciona uma imagem com propriedades para controlar a aparência da imagem

Elementos de contêiner

Os cartões também podem ter contêineres, que organizam uma coleção de elementos-filho.

  • Container - Define uma coleção de elementos
  • ColumnSet/Column - Define uma coleção de colunas, cada coluna é um contêiner
  • FactSet - Contentor de Factos
  • ImageSet - Contêiner de imagens para que a interface do usuário possa mostrar a experiência apropriada da galeria de fotos para uma coleção de imagens.

Elementos de entrada

Os elementos de entrada permitem que você peça uma interface do usuário nativa para criar formulários simples:

  • Input.Text - obter conteúdo de texto do usuário
  • Input.Date - obter uma data do utilizador
  • Input.Time - obter um tempo do usuário
  • Input.Number - obtenha um número do usuário
  • Input.ChoiceSet - Dê ao usuário um conjunto de opções e peça-lhe que escolha
  • Input.Toggle - Dê ao usuário uma única escolha entre dois itens e peça-lhes que escolham

Ações

As ações adicionam botões ao cartão. Eles podem executar uma variedade de ações, como abrir uma URL ou enviar alguns dados.

  • Action.OpenUrl - o botão abre um URL externo para visualização
  • Action.ShowCard - Solicita que um subcartão seja mostrado ao usuário.
  • Action.Submit - Peça para que todos os elementos de entrada sejam reunidos em um objeto que é enviado para você através de algum método definido pelo aplicativo host.

Exemplo Action.Submit: Com o Skype, um Action.Submit enviará uma atividade de bot do Bot Framework de volta para o bot com a propriedade Value contendo um objeto com todos os dados de entrada nele.

Saiba mais

  • Last updated on