A2UI 구성요소 갤러리 참조

이 페이지에서는 레이아웃, 디스플레이, 대화형, 컨테이너 구성요소와 일반 속성을 비롯해 사용 가능한 모든 A2UI 구성요소에 관한 포괄적인 참조를 제공합니다.

일반 속성

모든 구성요소는 특정 유형과 관계없이 구성할 수 있는 공통 속성 집합을 공유합니다.

속성 필수 설명
id 예 현재 화면 내 구성요소의 고유 식별자입니다.
accessibility 아니요 라벨, 역할 등 접근성을 개선하는 속성
weight 아니요 Row 또는 Column 레이아웃에서 구성요소가 형제에 비해 차지하는 공간을 제어하는 데 사용되는 값입니다(flex-grow와 유사).

일반 속성 및 구성요소별 속성을 비롯한 모든 속성의 전체 사양은 표준 카탈로그 정의 (JSON 스키마)를 참고하세요.

레이아웃 구성요소

레이아웃 구성요소는 사용자 인터페이스 내에서 다른 구성요소를 구조화하고 정렬하는 데 사용됩니다. 다음과 같은 레이아웃 구성요소를 사용할 수 있습니다.

행

Row는 하위 구성요소를 왼쪽에서 오른쪽으로 가로로 정렬하는 데 사용되는 레이아웃 구성요소입니다. 여러 구성요소를 나란히 배치할 수 있는 컨테이너 역할을 합니다. 행 내에서 하위 요소의 정확한 간격과 위치는 distribution 및 alignment 속성을 사용하여 제어할 수 있습니다.

다음 표에는 Row 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
children explicitList 또는 template Row 내에서 가로로 정렬할 하위 구성요소입니다.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly 하위 구성요소가 가로 축을 따라 분산되는 방식을 제어합니다.
alignment start, center, end, stretch 하위 구성요소가 세로 축에서 정렬되는 방식을 제어합니다.

JSON

{
  "id": "toolbar",
  "component": {
    "Row": {
      "children": { "explicitList": ["btn1", "btn2", "btn3"] },
      "distribution": "spaceBetween",
      "alignment": "center"
    }
  }
}

열

Column는 하위 구성요소를 위에서 아래로 세로로 정렬하는 데 사용되는 레이아웃 구성요소입니다. 여러 구성요소를 하나씩 아래에 배치할 수 있는 컨테이너 역할을 합니다. 열 내에서 하위 요소의 정확한 간격과 위치는 distribution 및 alignment 속성을 사용하여 제어할 수 있습니다.

다음 표에는 Column 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
children explicitList 또는 template Column 내에서 세로로 정렬할 하위 구성요소입니다.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly 하위 구성요소가 세로 축을 따라 분산되는 방식을 제어합니다.
alignment start, center, end, stretch 하위 구성요소가 가로 축에서 정렬되는 방식을 제어합니다.

JSON

{
  "id": "content",
  "component": {
    "Column": {
      "children": { "explicitList": ["header", "body", "footer"] },
      "distribution": "start",
      "alignment": "stretch"
    }
  }
}

목록

List는 스크롤 가능한 항목 목록을 표시하는 레이아웃 구성요소입니다. 데이터에서 항목을 생성하기 위한 정적 하위 요소와 동적 템플릿을 지원합니다. 스크롤 방향은 세로 또는 가로일 수 있습니다.

다음 표에는 List 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
children explicitList 또는 template 목록에 표시할 항목입니다.
direction vertical, horizontal 목록의 스크롤 방향입니다.
alignment start, center, end, stretch 교차축에서 목록 항목이 정렬되는 방식을 제어합니다.

JSON

{
  "id": "message-list",
  "component": {
    "List": {
      "children": {
        "template": {
          "dataBinding": "/messages",
          "componentId": "message-item"
        }
      },
      "direction": "vertical"
    }
  }
}

디스플레이 구성요소

디스플레이 구성요소는 사용자에게 정보를 표시하는 데 사용됩니다. 다음과 같은 디스플레이 구성요소를 사용할 수 있습니다.

텍스트

Text 구성요소는 텍스트 콘텐츠를 표시하고 제목, 캡션, 본문 텍스트와 같은 다양한 스타일 지정 힌트를 지원합니다.

다음 표에는 Text 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
text BoundValue 표시할 텍스트 콘텐츠입니다.
usageHint h1, h2, h3, h4, h5, caption, body 텍스트의 스타일 힌트입니다.

JSON

{
  "id": "title",
  "component": {
    "Text": {
      "text": { "literalString": "Welcome to A2UI" },
      "usageHint": "h1"
    }
  }
}

이미지

Image 구성요소는 지정된 URL의 이미지를 표시하고 이미지가 컨테이너에 맞게 조정되는 방식을 제어하는 옵션을 제공합니다.

다음 표에는 Image 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
url BoundValue 표시할 이미지의 URL입니다.
fit 문자열 이미지가 컨테이너에 맞아야 하는 방식입니다 (예: '커버').
usageHint 문자열 사용 힌트 (예: '히어로')

JSON

{
  "id": "hero",
  "component": {
    "Image": {
      "url": { "literalString": "https://example.com/hero.png" },
      "fit": "cover",
      "usageHint": "hero"
    }
  }
}

아이콘

Icon 구성요소는 카탈로그에 정의된 표준 세트의 아이콘을 표시합니다.

다음 표에는 Icon 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
name BoundValue 표시할 아이콘의 이름입니다 (예: 'check').

JSON

{
  "id": "check-icon",
  "component": {
    "Icon": {
      "name": { "literalString": "check" }
    }
  }
}

구분선

Divider 구성요소는 가로 또는 세로일 수 있는 시각적 구분선을 표시합니다.

다음 표에는 Divider 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
axis horizontal, vertical 구분선 방향입니다.

JSON

{
  "id": "separator",
  "component": {
    "Divider": {
      "axis": "horizontal"
    }
  }
}

대화형 구성요소

상호작용 구성요소를 사용하면 입력 제공이나 작업 트리거와 같이 애플리케이션과 상호작용할 수 있습니다. 다음과 같은 대화형 구성요소를 사용할 수 있습니다.

버튼

Button 구성요소는 애플리케이션 내에서 특정 작업이나 이벤트를 트리거하는 클릭 가능한 요소입니다.

다음 표에는 Button 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
child 구성요소 ID 버튼 내에 표시할 구성요소의 ID입니다 (예: 텍스트 구성요소).
primary 불리언 기본 (강조) 버튼인지 여부입니다.
action 객체 버튼을 클릭할 때 트리거할 작업입니다.

JSON

{
  "id": "submit-btn",
  "component": {
    "Button": {
      "child": "submit-text",
      "primary": true,
      "action": {
        "name": "submit_form"
      }
    }
  }
}

TextField

TextField는 텍스트를 입력할 수 있는 대화형 구성요소입니다. 선택적 유효성 검사도 지원합니다.

다음 표에는 TextField 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
label BoundValue 텍스트 필드의 라벨입니다.
text BoundValue 텍스트 콘텐츠 또는 바인드된 경로입니다.
textFieldType shortText, longText, number, obscured, date 텍스트 필드의 유형입니다.
validationRegexp 문자열 유효성 검사를 위한 정규 표현식입니다.

JSON

{
  "id": "email-input",
  "component": {
    "TextField": {
      "label": { "literalString": "Email Address" },
      "text": { "path": "/user/email" },
      "textFieldType": "shortText"
    }
  }
}

CheckBox

CheckBox 구성요소는 설정을 사용 또는 사용 중지로 전환할 수 있는 불리언 전환입니다.

다음 표에는 CheckBox 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
label BoundValue 체크박스의 라벨입니다.
value BoundValue (불리언) 체크박스의 값 (true/false) 또는 바인드된 경로입니다.

JSON

{
  "id": "terms-checkbox",
  "component": {
    "CheckBox": {
      "label": { "literalString": "I agree to the terms" },
      "value": { "path": "/form/agreedToTerms" }
    }
  }
}

슬라이더

Slider 구성요소를 사용하면 특정 범위에서 숫자 값을 선택할 수 있습니다.

다음 표에는 Slider 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
value BoundValue (숫자) 슬라이더 또는 바인딩된 경로의 현재 값입니다.
minValue 숫자 범위의 최솟값입니다.
maxValue 숫자 범위의 최댓값입니다.

JSON

{
  "id": "volume",
  "component": {
    "Slider": {
      "value": { "path": "/settings/volume" },
      "minValue": 0,
      "maxValue": 100
    }
  }
}

DateTimeInput

DateTimeInput 구성요소를 사용하면 날짜와 시간을 선택할 수 있습니다.

다음 표에는 DateTimeInput 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
value BoundValue 선택한 날짜/시간 값 또는 바인딩된 경로입니다.
enableDate 불리언 날짜 선택을 사용 설정할지 여부입니다.
enableTime 불리언 시간 선택을 사용 설정할지 여부입니다.

JSON

{
  "id": "date-picker",
  "component": {
    "DateTimeInput": {
      "value": { "path": "/booking/date" },
      "enableDate": true,
      "enableTime": false
    }
  }
}

객관식

MultipleChoice 구성요소를 사용하면 목록에서 하나 이상의 옵션을 선택할 수 있습니다.

다음 표에는 MultipleChoice 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
options 객체 배열 사용자가 선택할 수 있는 옵션 목록입니다. 각 옵션에는 라벨과 값이 있어야 합니다.
selections BoundValue 선택된 값 또는 바인딩된 경로입니다.
maxAllowedSelections 숫자 허용되는 최대 선택 수입니다.

JSON

{
  "id": "country-select",
  "component": {
    "MultipleChoice": {
      "options": [
        { "label": { "literalString": "USA" }, "value": "us" },
        { "label": { "literalString": "Canada" }, "value": "ca" }
      ],
      "selections": { "path": "/form/country" },
      "maxAllowedSelections": 1
    }
  }
}

컨테이너 구성요소

컨테이너 구성요소는 다른 구성요소를 그룹화하고 구성하는 데 사용됩니다. 다음 컨테이너 구성요소를 사용할 수 있습니다.

카드

Card 구성요소는 관련 콘텐츠를 그룹화하는 고도, 테두리, 패딩이 있는 컨테이너입니다.

다음 표에는 Card 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
child 구성요소 ID 카드 내에 표시할 구성요소의 ID입니다.

JSON

{
  "id": "info-card",
  "component": {
    "Card": {
      "child": "card-content"
    }
  }
}

Modal 구성요소는 진입점 구성요소에 의해 트리거되는 오버레이 대화상자입니다.

다음 표에는 Modal 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
entryPointChild 구성요소 ID 모달을 트리거하는 구성요소의 ID입니다 (예: 버튼).
contentChild 구성요소 ID 모달의 콘텐츠로 표시할 구성요소의 ID입니다.

JSON

{
  "id": "confirmation-modal",
  "component": {
    "Modal": {
      "entryPointChild": "open-modal-btn",
      "contentChild": "modal-content"
    }
  }
}

탭

Tabs 구성요소는 콘텐츠를 전환 가능한 패널로 정리하기 위한 탭 인터페이스를 제공합니다.

다음 표에는 Tabs 구성요소에 사용할 수 있는 속성이 나와 있습니다.

속성 유형/값 설명
tabItems 객체 배열 탭 목록입니다. 각 항목에는 title 및 child (구성요소 ID)이 있어야 합니다.

JSON

{
  "id": "settings-tabs",
  "component": {
    "Tabs": {
      "tabItems": [
        { "title": { "literalString": "General" }, "child": "general-tab" },
        { "title": { "literalString": "Privacy" }, "child": "privacy-tab" }
      ]
    }
  }
}

다음 단계