다음을 통해 공유

시작하기

적응형 카드는 JSON 직렬화된 카드 개체 모델입니다.

적응형 카드 구조

카드의 기본 구조는 다음과 같습니다.

  • AdaptiveCard - 루트 개체는 요소 구성, 동작, 말해야 하는 방법 및 렌더링에 필요한 스키마 버전을 포함하여 AdaptiveCard 자체를 설명합니다.
  • body - 카드 본문은 로 알려진 빌딩 블록으로 elements구성됩니다. 요소는 거의 무한 배열로 구성되어 많은 유형의 카드를 만들 수 있습니다.
  • actions - 많은 카드에는 사용자가 수행할 수 있는 작업 집합이 있습니다. 이 속성은 일반적으로 아래쪽의 "작업 표시줄"에서 렌더링되는 작업을 설명합니다.

예제 카드

이 샘플 카드는 이미지 뒤에 한 줄의 텍스트가 포함됩니다.

{
    "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 속성

모든 요소에는 type 개체의 종류를 식별하는 속성이 있습니다. 위의 카드를 보면 두 가지 요소, a TextBlock 및 Image.가 있는 것을 볼 수 있습니다.

모든 적응형 카드 요소는 세로로 쌓이며, 부모의 너비로 확장됩니다 (HTML의 display: block와 유사합니다). 그러나 컨테이너의 병렬 열을 만들기 위해 ColumnSet를 사용할 수 있습니다.

적응 요소

가장 기본적인 요소는 다음과 같습니다.

  • TextBlock - 속성이 있는 텍스트 블록을 추가하여 텍스트의 모양을 제어합니다.
  • 이미지 - 속성이 있는 이미지를 추가하여 이미지의 모양을 제어합니다.

컨테이너 요소

카드에는 자식 요소 컬렉션을 정렬하는 컨테이너가 있을 수도 있습니다.

  • 컨테이너 - 요소 컬렉션을 정의합니다.
  • ColumnSet/Column - 열 컬렉션을 정의하고 각 열은 컨테이너입니다.
  • FactSet - 팩트 컨테이너
  • ImageSet - UI가 이미지 컬렉션에 적절한 사진 갤러리 환경을 표시할 수 있도록 이미지 컨테이너입니다.

입력 요소

입력 요소를 사용하면 네이티브 UI를 요청하여 간단한 양식을 작성할 수 있습니다.

  • Input.Text - 사용자로부터 텍스트 콘텐츠 가져오기
  • Input.Date - 사용자로부터 날짜 가져오기
  • Input.Time - 사용자로부터 시간 가져오기
  • Input.Number - 사용자로부터 숫자 가져오기
  • Input.ChoiceSet - 사용자에게 선택 항목 집합을 제공하고 선택하도록 합니다.
  • Input.Toggle - 사용자에게 두 항목 중에서 한 가지 선택 항목을 지정하고 선택하도록 합니다.

활동

동작은 카드에 단추를 추가합니다. URL 열기 또는 일부 데이터 제출과 같은 다양한 작업을 수행할 수 있습니다.

  • Action.OpenUrl - 단추가 보기 위한 외부 URL을 엽니다.
  • Action.ShowCard - 사용자에게 표시할 하위 카드를 요청합니다.
  • Action.Submit - 모든 입력 요소를 개체로 수집하도록 요청한 다음 호스트 애플리케이션에서 정의한 일부 메서드를 통해 사용자에게 전송됩니다.

Action.Submit 예제: Skype에서 Action.Submit은 모든 입력 데이터를 포함한 개체를 Value 속성으로 가진 Bot Framework 봇 활동을 봇으로 다시 보냅니다.

더 알아보세요

  • Last updated on