A2UI 구성요소 갤러리 참조

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

Material 카탈로그 구성요소 및 기본 카탈로그 구성요소

A2UI는 에이전트 사용자 인터페이스를 빌드하기 위한 두 가지 구성요소 카탈로그인 머티리얼 카탈로그와 기본 카탈로그를 제공합니다.

Material 카탈로그에는 Google Material Design 가이드라인을 준수하도록 특별히 설계된 구성요소가 포함되어 있으며, A2UI v0.9 구성에서 지원되는 더 풍부하고 스타일이 지정된 UI 요소 집합을 제공합니다.

기본 카탈로그에는 A2UI v0.9 및 v0.8 구성 모두에서 지원되는 표준 디자인 시스템 중립적 UI 프리미티브(예: 레이아웃, 작업, 입력)가 포함되어 있습니다.

Material 카탈로그 구성요소

이 섹션에서는 레이아웃, 디스플레이, 탐색, 입력 구성요소를 비롯한 사용 가능한 A2UI Material Design 구성요소의 참조를 제공합니다.

소재 카탈로그 공통 속성

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

속성 필수 설명
id 예 현재 표시 경로 내 구성요소의 고유 식별자입니다.
accessibility 아니요 라벨 및 역할과 같은 접근성을 개선하는 속성
weight 아니요 MaterialRow 또는 MaterialColumn 레이아웃에서 flex-grow과 유사하게 구성요소가 동위 요소에 비해 차지하는 공간을 제어하는 데 사용되는 값입니다.

Material 카탈로그 레이아웃 구성요소

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

MaterialCard

Material Design 카드 컨테이너

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

속성 필수 기본값 설명
children 예 - 자녀 ID를 정의합니다.
appearance 아니요 raised 카드 모양 스타일입니다. 'outlined', 'raised' 중 하나입니다.
align 아니요 start 하위 요소의 정렬입니다. 'center', 'end', 'start', 'stretch' 중 하나입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
href 아니요 - 카드를 클릭할 때 이동할 URL입니다(선택사항). 설정하면 카드가 상호작용 가능해지고 새 탭에서 URL이 열립니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialCard",
    "appearance": "outlined",
    "children": [
      "card-content"
    ]
  },
  {
    "id": "card-content",
    "component": "MaterialText",
    "text": "Card content"
  }
]

MaterialColumn

Material 가이드라인을 사용하여 항목을 세로로 정렬하는 레이아웃 컨테이너입니다.

다음 표에서는 MaterialColumn 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
children 예 - 자녀 ID를 정의합니다.
justify 아니요 start 기본축 (세로)을 따라 하위 요소의 정렬을 정의합니다. 'start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly' 중 하나입니다.
align 아니요 stretch 하위 요소의 가로 정렬 ('start', 'center', 'end', 'stretch')
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "demo-column-header",
      "demo-column-content",
      "demo-column-footer"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "demo-column-header",
    "component": "MaterialText",
    "text": "Header",
    "usageHint": "h2"
  },
  {
    "id": "demo-column-content",
    "component": "MaterialText",
    "text": "Content goes here",
    "usageHint": "body"
  },
  {
    "id": "demo-column-footer",
    "component": "MaterialText",
    "text": "Footer",
    "usageHint": "caption"
  }
]

MaterialDialog

Material Design 메뉴 대화상자 컨테이너입니다.

다음 표에서는 MaterialDialog 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
open 아니요 false 대화상자가 열려 있는지 여부입니다. 리터럴 불리언 또는 데이터 결합 참조일 수 있습니다.
title 아니요 - 대화상자의 제목입니다.
disableClose 아니요 false 사용자가 외부를 클릭하거나 Escape 키를 눌러 대화상자를 닫을 수 있는지 여부입니다.
width 아니요 - 대화상자의 너비입니다 (예: '500px').
height 아니요 - 대화상자의 높이입니다 (예: '400px').
children 예 - 자녀 ID를 정의합니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "open-button",
      "confirmation-dialog"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "open-button",
    "component": "MaterialButton",
    "label": "Delete Item",
    "variant": "raised",
    "action": {
      "event": {
        "name": "requestDelete"
      }
    }
  },
  {
    "id": "confirmation-dialog",
    "component": "MaterialDialog",
    "open": {
      "path": "/app/dialogOpen"
    },
    "title": "Delete Confirmation",
    "children": [
      "dialog-layout"
    ]
  },
  {
    "id": "dialog-layout",
    "component": "MaterialColumn",
    "children": [
      "dialog-text",
      "dialog-actions"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "dialog-text",
    "component": "MaterialText",
    "text": "Are you sure you want to permanently delete this item?"
  },
  {
    "id": "dialog-actions",
    "component": "MaterialRow",
    "children": [
      "cancel-button",
      "confirm-button"
    ],
    "justify": "end",
    "align": "center"
  },
  {
    "id": "cancel-button",
    "component": "MaterialButton",
    "label": "Cancel",
    "variant": "basic",
    "action": {
      "event": {
        "name": "closeDialog"
      }
    }
  },
  {
    "id": "confirm-button",
    "component": "MaterialButton",
    "label": "Delete",
    "variant": "raised",
    "action": {
      "event": {
        "name": "confirmDelete"
      }
    }
  }
]

MaterialDivider

Material Design 구분선

다음 표에서는 MaterialDivider 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
inset 아니요 false 구분선이 인셋인지 여부입니다.
vertical 아니요 false 구분선이 세로인지 여부입니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "text-above",
      "divider",
      "text-below"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "text-above",
    "component": "MaterialText",
    "text": "This is the content above the divider."
  },
  {
    "id": "divider",
    "component": "MaterialDivider",
    "inset": false,
    "vertical": false
  },
  {
    "id": "text-below",
    "component": "MaterialText",
    "text": "This is the content below the divider."
  }
]

MaterialExpansionPanel

Material Design 확장 패널 컨테이너입니다.

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

속성 필수 기본값 설명
title 아니요 - 확장 패널 헤더에 표시되는 제목입니다.
description 아니요 - 확장 패널 헤더에 표시되는 설명입니다.
expanded 아니요 false 패널이 펼쳐져 있는지 여부입니다. 리터럴 불리언 또는 데이터 결합 참조일 수 있습니다.
disabled 아니요 false 확장 패널이 사용 중지되었는지 여부입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
children 예 - 자녀 ID를 정의합니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialExpansionPanel",
    "title": "Advanced Options",
    "description": "Configure advanced settings",
    "expanded": false,
    "children": [
      "panel-content"
    ]
  },
  {
    "id": "panel-content",
    "component": "MaterialText",
    "text": "Advanced settings content goes here"
  }
]

MaterialGridList

그리드 레이아웃의 A2UI 컨테이너 구성요소입니다. Angular Material 그리드 목록을 사용하여 하위 구성요소를 타일로 정렬합니다.

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

속성 필수 기본값 설명
children 예 - 자녀 ID를 정의합니다.
cols 아니요 2 그리드 목록의 열 수입니다. 리터럴 숫자 또는 데이터 결합 참조일 수 있습니다.
rowHeight 아니요 1:1 행 높이 비율 또는 고정 높이 (예: '100px')입니다. 리터럴 문자열 또는 데이터 결합 참조일 수 있습니다.
gutterSize 아니요 1px 그리드 거터의 크기입니다. 리터럴 문자열 또는 데이터 결합 참조일 수 있습니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialGridList",
    "cols": 2,
    "rowHeight": "1:1",
    "gutterSize": "8px",
    "children": [
      "card-a",
      "card-b",
      "card-c",
      "card-d"
    ]
  },
  {
    "id": "card-a",
    "component": "MaterialCard",
    "children": [
      "text-a"
    ]
  },
  {
    "id": "text-a",
    "component": "MaterialText",
    "text": "Card A"
  },
  {
    "id": "card-b",
    "component": "MaterialCard",
    "children": [
      "text-b"
    ]
  },
  {
    "id": "text-b",
    "component": "MaterialText",
    "text": "Card B"
  },
  {
    "id": "card-c",
    "component": "MaterialCard",
    "children": [
      "text-c"
    ]
  },
  {
    "id": "text-c",
    "component": "MaterialText",
    "text": "Card C"
  },
  {
    "id": "card-d",
    "component": "MaterialCard",
    "children": [
      "text-d"
    ]
  },
  {
    "id": "text-d",
    "component": "MaterialText",
    "text": "Card D"
  }
]

MaterialRow

Material 가이드라인을 사용하여 항목을 가로로 정렬하는 레이아웃 컨테이너입니다.

다음 표에서는 MaterialRow 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
children 예 - 자녀 ID를 정의합니다.
justify 아니요 start 기본 축 (가로)을 따라 하위 요소의 정렬을 정의합니다. 'start', 'center', 'end', 'spaceAround', 'spaceBetween', 'spaceEvenly' 중 하나입니다.
align 아니요 stretch 하위 요소의 세로 정렬 ('start', 'center', 'end', 'stretch')
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialRow",
    "children": [
      "item-icon",
      "item-details",
      "item-action"
    ],
    "justify": "spaceBetween",
    "align": "center"
  },
  {
    "id": "item-icon",
    "component": "MaterialIcon",
    "icon": "shopping_bag",
    "color": "primary"
  },
  {
    "id": "item-details",
    "component": "MaterialColumn",
    "children": [
      "item-title",
      "item-subtitle"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "item-title",
    "component": "MaterialText",
    "text": "Premium Wireless Headphones",
    "usageHint": "subtitle1"
  },
  {
    "id": "item-subtitle",
    "component": "MaterialText",
    "text": "$299.99 \u2022 Active Noise Cancelling",
    "usageHint": "caption"
  },
  {
    "id": "item-action",
    "component": "MaterialButton",
    "label": "Buy Now",
    "variant": "raised",
    "action": {
      "event": {
        "name": "buy_clicked"
      }
    }
  }
]

Material 카탈로그 콘텐츠 구성요소

디스플레이 및 콘텐츠 구성요소는 사용자에게 정보, 미디어, 상태를 표시하는 데 사용됩니다.

MaterialBadge

하위 요소 위에 Material Design 배지를 표시합니다.

다음 표에서는 MaterialBadge 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
text 아니요 - 배지에 표시할 텍스트 콘텐츠입니다.
color 아니요 - 배지의 색상 팔레트 ('primary', 'accent', 'warn')입니다.
position 아니요 above after 컨테이너를 기준으로 한 배지의 위치입니다 ('above after', 'above before', 'below after', 'below before').
size 아니요 medium 배지 크기 ('small', 'medium', 'large')입니다.
overlap 아니요 true 배지가 컨테이너와 겹쳐야 하는지 여부입니다.
disabled 아니요 false 배지가 사용 중지되었는지 여부입니다.
hidden 아니요 false 배지가 숨겨져 있는지 여부입니다.
description 아니요 - 배지에 대한 접근성 설명입니다.
children 예 - 자녀 ID를 정의합니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialBadge",
    "text": "42",
    "color": "warn",
    "children": [
      "badge-content"
    ]
  },
  {
    "id": "badge-content",
    "component": "MaterialButton",
    "label": "Notifications"
  }
]

MaterialIcon

Material Design 아이콘을 표시합니다.

다음 표에서는 MaterialIcon 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
icon 예 - 표시할 Material 아이콘의 이름입니다.
color 아니요 - 아이콘의 색상 팔레트 (기본, 강조, 경고)입니다.
tooltip 아니요 - 마우스 오버/포커스 시 표시할 도움말 텍스트입니다(선택사항).
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

Material Design 컨텍스트에서 이미지를 렌더링하는 A2UI 구성요소입니다. 둥근 모서리, 가로세로 비율, object-fit 속성을 지원합니다.

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

속성 필수 기본값 설명
url 예 - 표시할 이미지의 URL입니다.
alt 아니요 - 이미지의 접근성 대체 텍스트입니다.
fit 아니요 - 이미지를 컨테이너에 맞게 크기를 조절하는 방법을 지정합니다. 'fill', 'contain', 'cover', 'scaleDown', 'none' 중 하나입니다.
width 아니요 - 이미지의 맞춤 너비입니다 (예: '100px', '100%').
height 아니요 - 이미지의 맞춤 높이입니다 (예: '100px', '100%').
aspectRatio 아니요 - 이미지의 맞춤 가로세로 비율입니다 (예: '16/9', '1').
roundedCorners 아니요 false Material Design 표준 둥근 모서리를 적용할지 여부입니다.
borderRadius 아니요 - 이미지의 맞춤 테두리 반경입니다 (예: '50%', '12px'). roundedCorners를 재정의합니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialImage",
    "url": "https://www.gstatic.com/marketing-cms/assets/images/c5/3a/200414104c669203c62270f7884f/google-wordmarks-2x.webp=n-w100-h32-fcrop64=1,00000000ffffffff-rw",
    "width": "100px",
    "height": "32px",
    "fit": "scaleDown",
    "roundedCorners": true,
    "alt": "Google Wordmark"
  }
]

MaterialProgressBar

Angular Material 진행률 표시줄 구성요소의 A2UI 래퍼입니다. 확정, 미확정, 버퍼, 쿼리 모드를 지원합니다.

다음 표에서는 MaterialProgressBar 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
value 아니요 0 확정 및 버퍼 모드의 진행률 값 (0~100)
mode 아니요 determinate 진행률 표시줄의 모드입니다. 'determinate', 'indeterminate', 'buffer', 'query' 중 하나입니다.
bufferValue 아니요 0 버퍼 모드의 버퍼 값 (0~100)입니다.
color 아니요 - 진행률 표시줄의 색상 팔레트 ('primary', 'accent', 'warn')입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

Angular Material 진행률 스피너 구성요소의 A2UI 래퍼입니다. 확정 및 미확정 모드와 맞춤 측정기준을 지원합니다.

다음 표에서는 MaterialProgressSpinner 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
value 아니요 0 확정 모드의 진행률 값 (0~100)입니다.
mode 아니요 determinate 스피너의 모드입니다. 'determinate', 'indeterminate' 중 하나입니다.
diameter 아니요 40 진행률 스피너의 지름(픽셀)입니다.
strokeWidth 아니요 4 스피너 획의 너비(픽셀)입니다.
color 아니요 - 스피너의 색상 팔레트 ('primary', 'accent', 'warn')
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialProgressSpinner",
    "mode": "indeterminate",
    "diameter": 40,
    "strokeWidth": 4,
    "color": "accent",
    "ariaLabel": "Loading data"
  }
]

MaterialTable

Angular Material 테이블 구성요소의 A2UI 래퍼입니다. 정형 데이터를 열과 행으로 렌더링합니다.

다음 표에서는 MaterialTable 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
columns 예 - 열 정의 배열로, 각각 {header, field} 객체를 지정합니다.
rows 예 - 데이터 행 목록입니다. 키-값 레코드의 배열 또는 데이터 결합 참조일 수 있습니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
caption 아니요 - 테이블에 대한 접근 가능한 설명입니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

Material 서체로 텍스트를 표시합니다.

다음 표에서는 MaterialText 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
text 예 - 표시할 텍스트입니다. 리터럴 문자열이거나 데이터 모델의 값에 대한 참조일 수 있습니다.
usageHint 아니요 body 서체 스타일에 관한 힌트입니다. 'h1', 'h2', 'h3', 'h4', 'h5', 'subtitle1', 'subtitle2', 'body1', 'body2', 'body', 'caption' 중 하나입니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

Material 카탈로그 탐색 구성요소

탐색 및 작업 구성요소를 사용하면 사용자가 작업을 실행하거나 뷰 간에 이동할 수 있습니다.

MaterialButton

Material Design 버튼

다음 표에서는 MaterialButton 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
label 아니요 - 버튼에 표시할 텍스트 라벨입니다.
leadingIcon 아니요 - 라벨 앞에 표시할 머티리얼 아이콘의 이름입니다.
trailingIcon 아니요 - 라벨 뒤에 표시할 머티리얼 아이콘의 이름입니다.
variant 아니요 basic 버튼 스타일 변형입니다. 'raised', 'flat', 'stroked', 'icon', 'fab', 'mini-fab', 'basic' 중 하나입니다.
appearance 아니요 - 버튼의 시각적 모양입니다. 'text', 'filled', 'elevated', 'outlined', 'tonal' 중 하나입니다.
disabled 아니요 false 버튼이 사용 중지되었는지 여부입니다.
action 아니요 - 버튼을 클릭할 때 전달되는 작업입니다.
tooltip 아니요 - 마우스를 가져가면 표시되는 도움말 텍스트입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
disableRipple 아니요 false 클릭 시 물결 효과가 사용 중지되는지 여부입니다.
extended 아니요 false 버튼이 추가 라벨 또는 아이콘 공간으로 확장되는지 여부입니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

Material Design 아이콘 버튼

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

속성 필수 기본값 설명
icon 예 - 표시할 머티리얼 아이콘의 이름입니다.
action 예 - 아이콘 버튼을 클릭할 때 디스패치할 클라이언트 측 작업입니다.
ariaLabel 예 - 스크린 리더가 인식할 수 있는 텍스트 버튼에 아이콘만 포함되어 있으므로 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
color 아니요 - 버튼의 색상 팔레트 (기본, 강조, 경고)입니다.
disabled 아니요 false 버튼이 사용 중지되었는지 여부입니다.
tooltip 아니요 - 마우스를 가져가면 표시되는 도움말 텍스트입니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

Angular Material 메뉴 구성요소의 A2UI 래퍼입니다. 트리거 버튼과 드롭다운 메뉴 항목을 제공합니다.

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

속성 필수 기본값 설명
label 아니요 - 메뉴 트리거 버튼에 표시되는 텍스트 라벨입니다.
icon 아니요 - 트리거 버튼에 표시할 머티리얼 아이콘의 이름입니다.
disabled 아니요 false 메뉴 트리거 버튼이 사용 중지되었는지 여부입니다.
value 아니요 - 현재 선택된 값입니다. 리터럴 문자열 또는 데이터 결합 참조일 수 있습니다.
options 예 - 사용 가능한 메뉴 옵션 목록입니다. {label, value} 객체의 배열 또는 데이터 결합 참조일 수 있습니다.
action 아니요 - 메뉴 항목이 선택될 때 디스패치되는 클라이언트 측 작업입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialMenu",
    "label": "Options",
    "icon": "more_vert",
    "value": {
      "path": "/menu/selectedOption"
    },
    "options": [
      {
        "label": "Settings",
        "value": "settings"
      },
      {
        "label": "Help",
        "value": "help"
      },
      {
        "label": "Logout",
        "value": "logout"
      }
    ],
    "action": {
      "event": {
        "name": "menuSelection"
      }
    }
  }
]

MaterialTabs

Angular Material 탭 구성요소의 A2UI 래퍼입니다. 탭 탐색을 렌더링하고 활성 탭 선택을 관리합니다.

다음 표에서는 MaterialTabs 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
tabs 예 - 탭 정의 배열로, 각 정의는 {label, content} 객체를 지정합니다.
activeTab 아니요 0 현재 활성 탭의 0 기반 색인입니다. 리터럴 숫자 또는 데이터 결합 참조일 수 있습니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialTabs",
    "activeTab": {
      "path": "/app/selectedTab"
    },
    "tabs": [
      {
        "label": "Overview",
        "content": "Overview content"
      },
      {
        "label": "Details",
        "content": "Details content"
      },
      {
        "label": "Reviews",
        "content": "Reviews content"
      }
    ]
  }
]

Material 카탈로그 입력 구성요소

입력 및 양식 구성요소를 사용하면 사용자가 텍스트를 입력하고, 선택하고, 전환 옵션을 전환할 수 있습니다.

MaterialButtonToggle

단일 선택을 위한 Material Design 버튼 전환 그룹입니다.

다음 표에서는 MaterialButtonToggle 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
value 아니요 - 현재 선택된 값입니다. 리터럴 문자열이거나 데이터 모델의 값에 대한 참조일 수 있습니다.
options 예 - 선택할 수 있는 옵션 목록입니다. {label, value} 객체의 배열 또는 데이터 결합 참조일 수 있습니다.
disabled 아니요 false 버튼 전환 그룹이 사용 중지되었는지 여부입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
appearance 아니요 standard 버튼 전환 그룹의 모양 스타일입니다. 'legacy', 'standard' 중 하나입니다.
vertical 아니요 false 버튼 전환 그룹이 세로로 정렬되는지 여부입니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialButtonToggle",
    "ariaLabel": "Text alignment",
    "value": {
      "path": "/user/alignment"
    },
    "options": [
      {
        "label": "Left",
        "value": "left"
      },
      {
        "label": "Center",
        "value": "center"
      },
      {
        "label": "Right",
        "value": "right"
      }
    ]
  }
]

MaterialCheckbox

불리언 상태를 위한 Material Design 체크박스 구성요소입니다. 최적의 접근성을 위해 설명 라벨을 제공하거나 보조 기술에 ariaLabel을 사용하세요.

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

속성 필수 기본값 설명
label 아니요 - 체크박스 옆에 표시되는 텍스트 라벨입니다.
checked 아니요 false 체크박스가 선택되어 있는지 여부입니다. 리터럴 불리언 또는 데이터 모델의 값에 대한 참조일 수 있습니다.
disabled 아니요 false 체크박스가 사용 중지되었는지 여부입니다.
color 아니요 - 체크박스의 색상 팔레트 ('primary', 'accent', 'warn')입니다.
labelPosition 아니요 after 체크박스를 기준으로 한 라벨의 위치입니다 ('before', 'after').
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
tooltip 아니요 - 마우스를 가져가면 표시되는 도움말 텍스트입니다.
checks 아니요 - 입력의 유효성을 확인하기 위해 반응형으로 평가되는 검사 규칙 배열입니다. 각 규칙에는 동적 불리언 조건과 오류 메시지가 포함됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialCheckbox",
    "label": "Agree to Terms and Conditions",
    "ariaLabel": "Agree to Terms and Conditions",
    "checked": {
      "path": "/user/agreedToTerms"
    },
    "color": "primary"
  }
]

MaterialChips

단일 선택을 위한 Material Design 칩 목록 상자 구성요소입니다.

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

속성 필수 기본값 설명
value 아니요 - 현재 선택된 값입니다. 리터럴 문자열이거나 데이터 모델의 값에 대한 참조일 수 있습니다.
options 예 - 칩 옵션 목록입니다. {label, value} 객체의 배열 또는 데이터 결합 참조일 수 있습니다.
disabled 아니요 false 칩 목록 상자가 사용 중지되었는지 여부입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
action 아니요 - 칩이 선택될 때 디스패치할 작업입니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialChips",
    "ariaLabel": "Filter by status",
    "value": {
      "path": "/user/status"
    },
    "options": [
      {
        "label": "All",
        "value": "all"
      },
      {
        "label": "Active",
        "value": "active"
      },
      {
        "label": "Completed",
        "value": "completed"
      }
    ]
  }
]

MaterialDatepicker

Material Design 날짜 선택 도구 구성요소입니다.

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

속성 필수 기본값 설명
label 아니요 - 날짜 선택 도구 필드의 라벨입니다.
placeholder 아니요 - 플레이스홀더 텍스트입니다.
value 아니요 - 현재 선택된 날짜(ISO 형식)입니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
disabled 아니요 false 날짜 선택 도구가 사용 중지되었는지 여부입니다.
checks 아니요 - 입력의 유효성을 확인하기 위해 반응형으로 평가되는 검사 규칙 배열입니다. 각 규칙에는 동적 불리언 조건과 오류 메시지가 포함됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialDatepicker",
    "label": "Appointment Date",
    "placeholder": "Choose a date",
    "ariaLabel": "Appointment Date",
    "value": {
      "path": "/appointment/date"
    }
  }
]

MaterialInput

Material Design 텍스트 입력란입니다.

다음 표에서는 MaterialInput 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
label 아니요 - 입력란의 라벨입니다.
placeholder 아니요 - 플레이스홀더 텍스트입니다.
value 아니요 - 입력의 현재 값입니다. 리터럴 문자열이거나 데이터 모델의 값에 대한 참조일 수 있습니다.
disabled 아니요 false 입력이 사용 중지되었는지 여부입니다.
name 아니요 - 입력 요소의 이름입니다.
readonly 아니요 false 입력이 읽기 전용인지 여부입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
type 아니요 text 표시할 입력 컨트롤의 유형입니다. 'text', 'number', 'email', 'tel', 'date' 중 하나입니다. 'password'는 허용되지 않습니다.
validationRegexp 아니요 - 입력 검증을 위한 정규 표현식입니다.
checks 아니요 - 입력의 유효성을 확인하기 위해 반응형으로 평가되는 검사 규칙 배열입니다. 각 규칙에는 동적 불리언 조건과 오류 메시지가 포함됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

Angular Material 라디오 버튼 구성요소의 A2UI 래퍼입니다. 라디오 그룹 내 옵션 목록에서 단일 선택을 지원합니다.

다음 표에서는 MaterialRadioButton 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
value 아니요 - 현재 선택된 값입니다. 리터럴 문자열 또는 데이터 결합 참조일 수 있습니다.
options 예 - 사용 가능한 라디오 옵션 목록입니다. {label, value} 객체의 배열 또는 데이터 결합 참조일 수 있습니다.
disabled 아니요 false 라디오 그룹이 사용 중지되었는지 여부입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
color 아니요 - 라디오 버튼의 색상 팔레트 ('primary', 'accent', 'warn')입니다.
labelPosition 아니요 after 라디오 버튼을 기준으로 한 라벨의 위치입니다. 'before', 'after' 중 하나입니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialRadioButton",
    "ariaLabel": "Delivery options",
    "value": {
      "path": "/order/deliverySpeed"
    },
    "options": [
      {
        "label": "Standard",
        "value": "standard"
      },
      {
        "label": "Express",
        "value": "express"
      },
      {
        "label": "Next Day",
        "value": "nextDay"
      }
    ],
    "color": "primary",
    "labelPosition": "after"
  }
]

MaterialSelect

단일 선택을 위한 Material Design 선택 (드롭다운) 구성요소입니다. 접근성을 최적화하려면 항상 설명이 포함된 라벨을 제공하거나 보조 기술에 aria-label을 사용하세요.

다음 표에서는 MaterialSelect 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
label 아니요 - 선택 필드의 라벨입니다.
placeholder 아니요 - 값이 선택되지 않은 경우 표시되는 플레이스홀더 텍스트입니다.
value 아니요 - 현재 선택된 값입니다. 리터럴 문자열이거나 데이터 모델의 값에 대한 참조일 수 있습니다.
options 예 - 선택할 수 있는 옵션 목록입니다. {label, value} 객체의 배열 또는 데이터 결합 참조일 수 있습니다.
disabled 아니요 false 선택 구성요소가 사용 중지되었는지 여부입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
checks 아니요 - 입력의 유효성을 확인하기 위해 반응형으로 평가되는 검사 규칙 배열입니다. 각 규칙에는 동적 불리언 조건과 오류 메시지가 포함됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialSelect",
    "label": "Favorite Color",
    "placeholder": "Choose a color",
    "ariaLabel": "Select your favorite color",
    "value": {
      "path": "/user/favoriteColor"
    },
    "options": [
      {
        "label": "Red",
        "value": "red"
      },
      {
        "label": "Green",
        "value": "green"
      },
      {
        "label": "Blue",
        "value": "blue"
      }
    ]
  }
]

MaterialSlideToggle

Angular Material 슬라이드 전환 구성요소의 A2UI 래퍼입니다. 불리언 전환 바인딩 및 맞춤 접근성 속성을 지원합니다.

다음 표에서는 MaterialSlideToggle 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
label 아니요 - 슬라이드 전환 옆에 표시되는 텍스트 라벨입니다.
checked 아니요 false 슬라이드 전환이 선택되어 있는지 여부입니다. 리터럴 불리언 또는 데이터 결합 참조일 수 있습니다.
disabled 아니요 false 슬라이드 전환 버튼이 사용 중지되었는지 여부입니다.
required 아니요 false 슬라이드 전환이 필수인지 여부입니다.
color 아니요 - 전환 버튼의 색상 팔레트 ('primary', 'accent', 'warn')입니다.
labelPosition 아니요 after 전환 버튼을 기준으로 한 라벨의 위치입니다 ('before', 'after').
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
tooltip 아니요 - 마우스를 가져가면 표시되는 도움말 텍스트입니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

Angular Material 슬라이더 구성요소의 A2UI 래퍼입니다. 숫자 값 선택 및 범위 제약 조건을 지원합니다.

다음 표에서는 MaterialSlider 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 필수 기본값 설명
value 아니요 0 슬라이더의 현재 값입니다. 리터럴 숫자 또는 데이터 결합 참조일 수 있습니다.
min 아니요 0 슬라이더의 최솟값입니다.
max 아니요 100 슬라이더의 최댓값입니다.
step 아니요 1 슬라이더의 단계 증분입니다.
disabled 아니요 false 슬라이더가 사용 중지되었는지 여부입니다.
color 아니요 - 슬라이더의 색상 팔레트 ('primary', 'accent', 'warn')입니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - 플렉스 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialSlider",
    "min": 0,
    "max": 100,
    "step": 5,
    "value": {
      "path": "/audio/volume"
    },
    "color": "primary",
    "ariaLabel": "Volume adjustment"
  }
]

MaterialTimepicker

Angular Material Timepicker 구성요소의 A2UI 래퍼입니다. 시간 선택 및 양식 입력란 통합을 지원합니다.

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

속성 필수 기본값 설명
label 아니요 - 시간 선택 도구 필드의 텍스트 라벨입니다.
placeholder 아니요 - 플레이스홀더 텍스트입니다.
value 아니요 - ISO 형식의 현재 선택된 시간입니다. 리터럴 문자열 또는 데이터 결합 참조일 수 있습니다.
ariaLabel 아니요 - 스크린 리더가 인식할 수 있는 텍스트 표시되는 라벨이 없는 경우 접근성을 위해 권장됩니다.
ariaLabelledby 아니요 - 현재 요소에 라벨을 지정하는 요소를 식별합니다. 접근성에 사용됩니다.
ariaDescribedby 아니요 - 현재 요소를 설명하는 요소를 식별합니다. 접근성에 사용됩니다.
disabled 아니요 false 시간 선택 도구가 사용 중지되었는지 여부입니다.
checks 아니요 - 입력의 유효성을 확인하기 위해 반응형으로 평가되는 검사 규칙 배열입니다. 각 규칙에는 동적 불리언 조건과 오류 메시지가 포함됩니다.
style 아니요 - 요소에 적용할 인라인 스타일입니다.
weight 아니요 - Flex 컨테이너에 배치될 때 요소의 레이아웃 가중치입니다. 
[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

기본 카탈로그 구성요소

이 섹션에서는 사용 가능한 A2UI 기본 카탈로그 구성요소에 관한 참조를 제공합니다.

기본 카탈로그 스키마 파일

이러한 속성에 대한 자세한 내용은 다음을 참고하세요.

기본 카탈로그 공통 속성

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

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

기본 카탈로그 레이아웃 구성요소

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

행

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

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

속성 유형/값 설명
children v0.9: 구성요소 ID 또는 템플릿 정의 배열
v0.8: explicitList 또는 template 		Row 내에서 가로로 정렬할 하위 구성요소입니다.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly 하위 구성요소가 가로 축을 따라 분산되는 방식을 제어합니다.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch 하위 구성요소가 세로 축에서 정렬되는 방식을 제어합니다.

v0.9 JSON

{
  "id": "toolbar",
  "component": "Row",
  "children": ["btn1", "btn2", "btn3"],
  "justify": "spaceBetween",
  "align": "center"
}

v0.8 JSON

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

열

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

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

속성 유형/값 설명
children v0.9: 구성요소 ID 또는 템플릿 정의 배열
v0.8: explicitList 또는 template 		Column 내에서 세로로 정렬할 하위 구성요소입니다.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly 하위 구성요소가 세로 축을 따라 분산되는 방식을 제어합니다.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch 하위 구성요소가 가로 축에서 정렬되는 방식을 제어합니다.

v0.9 JSON

{
  "id": "content",
  "component": "Column",
  "children": ["header", "body", "footer"],
  "justify": "start",
  "align": "stretch"
}

v0.8 JSON

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

목록

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

다음 표에서는 List 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 유형/값 설명
children v0.9: 구성요소 ID 또는 템플릿 정의 배열
v0.8: explicitList 또는 template 		목록에 표시할 항목입니다.
direction vertical, horizontal 목록의 스크롤 방향입니다.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch 교차축에서 목록 항목이 정렬되는 방식을 제어합니다.

v0.9 JSON

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

v0.8 JSON

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

기본 카탈로그 표시 구성요소

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

텍스트

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

다음 표에서는 Text 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 유형/값 설명
text v0.9: 문자열 또는 DataBinding
v0.8: BoundValue 		표시할 텍스트 콘텐츠입니다.
variant (v0.9)
usageHint (v0.8) 		h1, h2, h3, h4, h5, caption, body 텍스트의 스타일 지정 힌트입니다.

v0.9 JSON

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

v0.8 JSON

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

이미지

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

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

속성 유형/값 설명
url v0.9: 문자열 또는 DataBinding
v0.8: BoundValue 		표시할 이미지의 URL입니다.
fit 문자열 이미지가 컨테이너에 맞게 조정되는 방식입니다 (예: 'cover').
variant (v0.9)
usageHint (v0.8) 		문자열 사용 또는 스타일 지정 변형에 대한 힌트입니다 (예: 'hero').

v0.9 JSON

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

v0.8 JSON

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

아이콘

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

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

속성 유형/값 설명
name v0.9: 문자열 또는 DataBinding
v0.8: BoundValue 		표시할 아이콘의 이름입니다 (예: 'check').

v0.9 JSON

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

v0.8 JSON

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

구분선

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

다음 표에서는 Divider 구성요소에 사용할 수 있는 속성을 간략하게 설명합니다.

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

v0.9 JSON

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

v0.8 JSON

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

기본 카탈로그 상호작용 구성요소

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

버튼

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

다음 표에서는 Button 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 유형/값 설명
child 구성요소 ID 버튼 내부에 표시할 구성요소의 ID입니다 (예: Text 구성요소).
variant (v0.9)
primary (v0.8) 		v0.9: 문자열 (예: "primary")
v0.8: 불리언 		버튼에 적용되는 스타일 유형 또는 강조입니다.
action v0.9: 이벤트 객체 (예: 키 입력 `event`)
v0.8: 작업 객체 (예: 키 입력 `name`) 		버튼을 클릭할 때 트리거할 작업입니다.

v0.9 JSON

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

v0.8 JSON

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

TextField

TextField는 텍스트를 입력할 수 있는 대화형 구성요소입니다. 또한 선택적 검증을 지원합니다.

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

속성 유형/값 설명
label v0.9: 문자열
v0.8: BoundValue 		텍스트 입력란의 라벨입니다.
value (v0.9)
text (v0.8) 		v0.9: 문자열 또는 DataBinding
v0.8: BoundValue 		텍스트 콘텐츠 또는 바운드 경로입니다.
textFieldType shortText, longText, number, obscured, date 텍스트 필드의 유형입니다.
validationRegexp 문자열 검증을 위한 정규 표현식입니다.

v0.9 JSON

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

v0.8 JSON

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

CheckBox

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

다음 표에서는 CheckBox 구성요소에 사용할 수 있는 속성을 간략하게 설명합니다.

속성 유형/값 설명
label v0.9: 문자열
v0.8: BoundValue 		체크박스의 라벨입니다.
value v0.9: DataBinding (불리언)
v0.8: BoundValue (불리언) 		체크박스의 값 (true/false) 또는 바인딩된 경로입니다.

v0.9 JSON

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

v0.8 JSON

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

슬라이더

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

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

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

v0.9 JSON

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

v0.8 JSON

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

DateTimeInput

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

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

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

v0.9 JSON

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

v0.8 JSON

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

ChoicePicker (v0.9) / MultipleChoice (v0.8)

목록에서 하나 이상의 옵션을 선택합니다. 이 구성요소의 이름이 v0.8의 MultipleChoice에서 v0.9의 ChoicePicker로 변경되었습니다.

다음 표에는 사용 가능한 속성이 나와 있습니다.

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

v0.9 JSON

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

v0.8 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입니다.

v0.9 JSON

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

v0.8 JSON

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

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

다음 표에서는 Modal 구성요소에 사용할 수 있는 속성을 설명합니다.

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

v0.9 JSON

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

v0.8 JSON

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

탭

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

다음 표에서는 Tabs 구성요소에 사용할 수 있는 속성을 설명합니다.

속성 유형/값 설명
tabItems 객체 배열 탭 목록입니다. 각 항목에는 title (v0.9의 문자열, v0.8의 BoundValue)와 child (구성요소 ID)가 있어야 합니다.

v0.9 JSON

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

v0.8 JSON

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

버전 차이 요약

구성요소 이름과 속성은 버전 간에 거의 동일합니다. 구조적 차이점은 다음과 같습니다.

관점 v0.8 v0.9
구성요소 래퍼 "component": { "Text": { ... } } "component": "Text", ...props
문자열 값 { "literalString": "Hello" } "Hello"
어린이 { "explicitList": ["a", "b"] } ["a", "b"]
데이터 결합 { "path": "/data" } { "path": "/data" } (동일)
텍스트/이미지 스타일 지정 usageHint variant
버튼 스타일 지정 primary: true variant: "primary"
작업 형식 { "name": "..." } { "event": { "name": "..." } }
선택 구성요소 MultipleChoice ChoicePicker
레이아웃 정렬 distribution, alignment justify, align
TextField 값 text value

진화 가이드

v0.8에서 v0.9로 이동하는 방법에 관한 자세한 내용은 v0.8~v0.9 진화 가이드를 참고하세요.

실시간 예시

모든 구성요소의 작동 모습을 확인하려면 다음 단계를 따르세요.

cd samples/client/angular
yarn start gallery

다음 단계