Udostępnij za pośrednictwem

Wprowadzenie

Karta adaptacyjna to model obiektów karty serializowanej w formacie JSON.

Struktura kart adaptacyjnych

Podstawowa struktura karty jest następująca:

  • AdaptiveCard - Obiekt główny opisuje samą kartę adaptacyjną, w tym jej skład elementów, działania, sposób wymawiania oraz wersję schematu wymaganą do jej renderowania.
  • body- Treść karty składa się z bloków konstrukcyjnych nazywanych elements. Elementy mogą składać się w niemal nieskończonych aranżacjach, aby utworzyć wiele typów kart.
  • actions — Wiele kart ma zestaw akcji, które użytkownik może wykonać. Ta właściwość opisuje te akcje, które są zwykle renderowane na pasku akcji u dołu.

Przykładowa karta

Ta przykładowa karta zawierająca pojedynczy wiersz tekstu, po którym następuje obraz.

{
    "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 własność

Każdy element ma type właściwość, która określa, jaki jest obiekt. Na powyższej karcie widać, że mamy dwa elementy: TextBlock oraz Image.

Wszystkie elementy karty adaptacyjnej układają się pionowo i rozszerzają się do szerokości ich elementu nadrzędnego (pomyśl o display: block w HTML). Można jednak użyć elementu , ColumnSet aby utworzyć kolumny obok siebie kontenerów.

Elementy adaptacyjne

Najbardziej podstawowe elementy to:

  • TextBlock — dodaje blok tekstu z właściwościami w celu kontrolowania wyglądu tekstu
  • Obraz — dodaje obraz z właściwościami, aby kontrolować wygląd obrazu

Elementy kontenera

Karty mogą również zawierać kontenery, które rozmieszczają kolekcję elementów podrzędnych.

  • Kontener — definiuje kolekcję elementów
  • ColumnSet/Column — definiuje kolekcję kolumn, a każda kolumna jest kontenerem
  • FactSet — kontener faktów
  • ImageSet — pojemnik obrazów, dzięki czemu UI może wyświetlać odpowiednie doświadczenie galerii zdjęć dla kolekcji obrazów.

Elementy wejściowe

Elementy wejściowe umożliwiają wywoływanie natywnego interfejsu użytkownika do tworzenia prostych formularzy.

  • Input.Text — pobieranie zawartości tekstowej od użytkownika
  • Input.Date — pobieranie daty od użytkownika
  • Input.Time — pobierz czas od użytkownika
  • Input.Number — pobieranie liczby od użytkownika
  • Input.ChoiceSet — nadaj użytkownikowi zestaw wyborów i wybierz je
  • Input.Toggle — nadaj użytkownikowi pojedynczy wybór między dwoma elementami i wybierz je

Czynności

Akcje dodają przyciski do karty. Mogą one wykonywać różne akcje, takie jak otwieranie adresu URL lub przesyłanie niektórych danych.

  • Action.OpenUrl — przycisk otwiera zewnętrzny adres URL do wyświetlania
  • Action.ShowCard — żąda wyświetlania użytkownikowi karty podrzędnej.
  • Action.Submit — poproś o zebranie wszystkich elementów wejściowych do obiektu, który następnie jest wysyłany do Ciebie za pośrednictwem jakiejś metody zdefiniowanej przez aplikację hosta.

Przykład Action.Submit: Za pomocą programu Skype żądanie Action.Submit wyśle działanie bota Bot Framework z powrotem do bota z właściwością Value zawierającą obiekt ze wszystkimi danymi wejściowymi na nim.

Dowiedz się więcej