A2UI コンポーネント ギャラリーのリファレンス

このページでは、レイアウト、表示、インタラクティブ、コンテナのコンポーネント、共通プロパティなど、利用可能なすべての A2UI コンポーネントの包括的なリファレンスを提供します。

マテリアル カタログ コンポーネントと基本カタログ コンポーネント

A2UI には、エージェント ユーザー インターフェースを構築するための 2 つの異なるコンポーネント カタログ（マテリアル カタログと基本カタログ）が用意されています。

注: 基本カタログは、v0.8 では「標準カタログ」と呼ばれます。詳細については、0.8 コンポーネント モデルのドキュメントをご覧ください。

マテリアル カタログには、Google マテリアル デザイン ガイドラインに準拠するように特別に設計されたコンポーネントが含まれており、A2UI v0.9 構成でサポートされている、より豊富でスタイリッシュな UI 要素のセットが提供されます。

基本カタログには、A2UI v0.9 と v0.8 の両方の構成でサポートされている、標準の、デザイン システムに依存しない UI プリミティブ（レイアウト、アクション、入力など）が含まれています。

マテリアル カタログ コンポーネント

このセクションでは、レイアウト、ディスプレイ、ナビゲーション、入力コンポーネントなど、利用可能な A2UI マテリアル デザイン コンポーネントのリファレンスを提供します。

注: A2UI マテリアル カタログ コンポーネントは、A2UI バージョン v0.9 構成でサポートされています。A2UI バージョンの詳細については、A2UI ドキュメントの仕様バージョンをご覧ください。

マテリアル カタログの共通プロパティ

すべてのコンポーネントは、特定のタイプに関係なく、構成可能な一連の共通プロパティを共有します。

プロパティ	必須	説明
id	はい	現在のサーフェス内のコンポーネントの固有識別子。
accessibility	いいえ	ラベルやロールなど、ユーザー補助機能を改善するための属性。
weight	いいえ	MaterialRow または MaterialColumn レイアウトで使用される値。flex-grow と同様に、兄弟要素に対してコンポーネントが占めるスペースを制御します。

マテリアル カタログのレイアウト コンポーネント

レイアウト コンポーネントは、ユーザー インターフェース内の他のコンポーネントを構造化して配置するために使用されます。

MaterialCard

マテリアル デザインのカードコンテナ。

次の表に、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

マテリアル ガイドラインに沿ってアイテムを縦に並べるレイアウト コンテナ。

次の表に、MaterialColumn コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
children	はい	-	子 ID を定義します。
justify	いいえ	start	主軸（垂直方向）に沿った子の配置を定義します。「start」、「center」、「end」、「spaceBetween」、「spaceAround」、「spaceEvenly」のいずれか。
align	いいえ	stretch	子の水平方向の配置（「start」、「center」、「end」、「stretch」）。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "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

マテリアル デザインのメニュー ダイアログ コンテナ。

次の表に、MaterialDialog コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
open	いいえ	false	ダイアログが開いているかどうか。リテラル ブール値またはデータ バインディング参照を使用できます。
title	いいえ	-	ダイアログのタイトル。
disableClose	いいえ	false	ユーザーがダイアログの外側をクリックするか、Esc キーを押してダイアログを閉じることができるかどうか。
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

マテリアル デザインの区切り線。

次の表に、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

マテリアル デザインの拡張パネル コンテナ。

次の表に、MaterialExpansionPanel コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
title	×	-	拡張パネルのヘッダーに表示されるタイトル。
description	いいえ	-	拡張パネルのヘッダーに表示される説明。
expanded	いいえ	false	パネルが展開されているかどうか。リテラル ブール値またはデータ バインディング参照を使用できます。
disabled	いいえ	false	拡張パネルが無効かどうか。
ariaLabel	いいえ	-	スクリーン リーダーで識別可能なテキスト。表示ラベルがない場合に、ユーザー補助のために推奨されます。
ariaLabelledby	いいえ	-	現在の要素にラベルを付ける要素（または複数の要素）を識別します。ユーザー補助に使用されます。
ariaDescribedby	いいえ	-	現在の要素を説明する要素を識別します。ユーザー補助に使用されます。
children	はい	-	子 ID を定義します。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "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 Grid List を使用して、子コンポーネントをタイルに配置します。

次の表に、MaterialGridList コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
children	はい	-	子 ID を定義します。
cols	いいえ	2	グリッドリストの列数。リテラル数値またはデータ バインディング参照を使用できます。
rowHeight	いいえ	1:1	行の高さの比率または固定の高さ（例: 「100px」）。リテラル文字列またはデータ バインディング参照を使用できます。
gutterSize	いいえ	1px	グリッドのガターのサイズ。リテラル文字列またはデータ バインディング参照を使用できます。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "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

マテリアル ガイドラインに沿ってアイテムを横方向に配置するレイアウト コンテナ。

次の表に、MaterialRow コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
children	はい	-	子 ID を定義します。
justify	いいえ	start	主軸（水平方向）に沿った子の配置を定義します。「start」、「center」、「end」、「spaceAround」、「spaceBetween」、「spaceEvenly」のいずれか。
align	いいえ	stretch	子の垂直方向の配置（「start」、「center」、「end」、「stretch」）。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "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"
      }
    }
  }
]

マテリアル カタログのコンテンツ コンポーネント

表示コンポーネントとコンテンツ コンポーネントは、情報、メディア、ステータスをユーザーに表示するために使用されます。

MaterialBadge

子要素の上にマテリアル デザイン バッジを表示します。

次の表に、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

マテリアル デザインのアイコンを表示します。

次の表に、MaterialIcon コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
icon	はい	-	表示するマテリアル アイコンの名前。
color	いいえ	-	アイコンのカラーパレット（プライマリ、アクセント、警告）。
tooltip	いいえ	-	ホバー / フォーカス時に表示するツールチップ テキスト（省略可）。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

マテリアル デザイン コンテキストで画像をレンダリングするための 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	マテリアル デザイン標準の角丸を適用するかどうか。
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 Progress Spinner コンポーネントの A2UI ラッパー。確定モードと不確定モード、カスタム寸法をサポートします。

次の表に、MaterialProgressSpinner コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
value	いいえ	0	確定モードの進捗状況の値（0 ～ 100）。
mode	いいえ	determinate	スピナーのモード。「determinate」、「indeterminate」のいずれか。
diameter	いいえ	40	進行状況スピナーの直径（ピクセル単位）。
strokeWidth	いいえ	4	スピナーのストロークの幅（ピクセル単位）。
color	いいえ	-	スピナーのカラーパレット（「primary」、「accent」、「warn」）。
ariaLabel	いいえ	-	スクリーン リーダーで識別可能なテキスト。表示ラベルがない場合に、ユーザー補助のために推奨されます。
ariaLabelledby	いいえ	-	現在の要素にラベルを付ける要素（または複数の要素）を識別します。ユーザー補助に使用されます。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "id": "root",
    "component": "MaterialProgressSpinner",
    "mode": "indeterminate",
    "diameter": 40,
    "strokeWidth": 4,
    "color": "accent",
    "ariaLabel": "Loading data"
  }
]

MaterialTable

Angular Material Table コンポーネントの A2UI ラッパー。構造化データを列と行にレンダリングします。

次の表に、MaterialTable コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
columns	はい	-	列定義の配列。それぞれが {header, field} オブジェクトを指定します。
rows	はい	-	データ行のリスト。Key-Value レコードの配列またはデータ バインディング参照を指定できます。
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

マテリアル タイポグラフィでテキストを表示します。

次の表に、MaterialText コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
text	はい	-	表示するテキスト。これは、リテラル文字列またはデータモデル内の値への参照です。
usageHint	いいえ	body	タイポグラフィ スタイルのヒント。「h1」、「h2」、「h3」、「h4」、「h5」、「subtitle1」、「subtitle2」、「body1」、「body2」、「body」、「caption」のいずれか。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

マテリアル カタログのナビゲーション コンポーネント

ナビゲーション コンポーネントとアクション コンポーネントを使用すると、ユーザーはアクションを実行したり、ビュー間を移動したりできます。

MaterialButton

マテリアル デザイン ボタン。

次の表に、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	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

マテリアル デザインのアイコンボタン。

次の表に、MaterialIconButton コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
icon	はい	-	表示するマテリアル アイコンの名前。
action	はい	-	アイコンボタンがクリックされたときにディスパッチされるクライアントサイドのアクション。
ariaLabel	はい	-	スクリーン リーダーで識別可能なテキスト。ボタンにアイコンのみが含まれているため、ユーザー補助の観点から推奨されます。
ariaLabelledby	いいえ	-	現在の要素にラベルを付ける要素（または複数の要素）を識別します。ユーザー補助に使用されます。
ariaDescribedby	いいえ	-	現在の要素を説明する要素を識別します。ユーザー補助に使用されます。
color	いいえ	-	ボタンのカラーパレット（プライマリ、アクセント、警告）。
disabled	いいえ	false	ボタンが無効かどうか。
tooltip	いいえ	-	カーソルを合わせたときに表示するツールチップ テキスト。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

Angular Material Menu コンポーネントの 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 Tabs コンポーネントの 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"
      }
    ]
  }
]

マテリアル カタログの入力コンポーネント

入力コンポーネントとフォーム コンポーネントを使用すると、ユーザーはテキストの入力、選択、切り替えオプションを行うことができます。

MaterialButtonToggle

単一選択用のマテリアル デザイン ボタン切り替えグループ。

次の表に、MaterialButtonToggle コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
value	×	-	現在選択されている値。これは、リテラル文字列またはデータモデル内の値への参照です。
options	はい	-	選択可能なオプションのリスト。{label, value} オブジェクトの配列またはデータ バインディング参照を指定できます。
disabled	いいえ	false	ボタン切り替えグループが無効かどうか。
ariaLabel	いいえ	-	スクリーン リーダーで識別可能なテキスト。表示ラベルがない場合に、ユーザー補助のために推奨されます。
ariaLabelledby	いいえ	-	現在の要素にラベルを付ける要素（または複数の要素）を識別します。ユーザー補助に使用されます。
ariaDescribedby	いいえ	-	現在の要素を説明する要素を識別します。ユーザー補助に使用されます。
appearance	いいえ	standard	切り替えボタンのグループの外観スタイル。「legacy」、「standard」のいずれか。
vertical	いいえ	false	切り替えボタンのグループを縦方向に配置するかどうか。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "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

ブール値の状態を表すマテリアル デザインのチェックボックス コンポーネント。最適なユーザー補助を実現するには、わかりやすいラベルを指定するか、支援技術に 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

単一選択用のマテリアル デザイン チップ リストボックス コンポーネント。

次の表に、MaterialChips コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
value	×	-	現在選択されている値。これは、リテラル文字列またはデータモデル内の値への参照です。
options	はい	-	チップ オプションのリスト。{label, value} オブジェクトの配列またはデータ バインディング参照を指定できます。
disabled	いいえ	false	チップ リストボックスが無効かどうか。
ariaLabel	いいえ	-	スクリーン リーダーで識別可能なテキスト。表示ラベルがない場合に、ユーザー補助のために推奨されます。
ariaLabelledby	いいえ	-	現在の要素にラベルを付ける要素（または複数の要素）を識別します。ユーザー補助に使用されます。
ariaDescribedby	いいえ	-	現在の要素を説明する要素を識別します。ユーザー補助に使用されます。
action	いいえ	-	チップが選択されたときにディスパッチするアクション。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "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

マテリアル デザインの日付選択ツール コンポーネント。

次の表に、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

マテリアル デザインのテキスト入力フィールド。

次の表に、MaterialInput コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
label	×	-	入力フィールドのラベル。
placeholder	いいえ	-	プレースホルダ テキスト。
value	いいえ	-	入力の現在の値。これは、リテラル文字列またはデータモデル内の値への参照です。
disabled	いいえ	false	入力が無効かどうか。
name	いいえ	-	入力要素の名前。
readonly	いいえ	false	入力が読み取り専用かどうか。
ariaLabel	いいえ	-	スクリーン リーダーで識別可能なテキスト。表示ラベルがない場合に、ユーザー補助のために推奨されます。
ariaLabelledby	いいえ	-	現在の要素にラベルを付ける要素（または複数の要素）を識別します。ユーザー補助に使用されます。
ariaDescribedby	いいえ	-	現在の要素を説明する要素を識別します。ユーザー補助に使用されます。
type	いいえ	text	表示する入力コントロールのタイプ。「text」、「number」、「email」、「tel」、「date」のいずれか。「password」は使用できません。
validationRegexp	いいえ	-	入力検証用の正規表現。
checks	いいえ	-	検証ルールの配列（それぞれに動的なブール条件とエラー メッセージが含まれる）。入力の有効性を判断するためにリアクティブに評価されます。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

Angular Material ラジオボタン コンポーネントの A2UI ラッパー。ラジオグループ内のオプションのリストから 1 つを選択できます。

次の表に、MaterialRadioButton コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
value	×	-	現在選択されている値。リテラル文字列またはデータ バインディング参照を使用できます。
options	はい	-	利用可能なラジオ オプションのリスト。{label, value} オブジェクトの配列またはデータ バインディング参照を指定できます。
disabled	いいえ	false	ラジオボタン グループが無効かどうか。
ariaLabel	いいえ	-	スクリーン リーダーで識別可能なテキスト。表示ラベルがない場合に、ユーザー補助のために推奨されます。
ariaLabelledby	いいえ	-	現在の要素にラベルを付ける要素（または複数の要素）を識別します。ユーザー補助に使用されます。
ariaDescribedby	いいえ	-	現在の要素を説明する要素を識別します。ユーザー補助に使用されます。
color	いいえ	-	ラジオボタンのカラーパレット（「primary」、「accent」、「warn」）。
labelPosition	いいえ	after	ラジオボタンに対するラベルの相対的な位置。「before」または「after」のいずれか。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "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

単一選択用のマテリアル デザイン選択（プルダウン）コンポーネント。ユーザー補助を最適化するには、常にわかりやすいラベルを指定するか、支援技術に aria-label を使用します。

次の表に、MaterialSelect コンポーネントで使用できるプロパティを示します。

プロパティ	必須	デフォルト値	説明
label	×	-	選択フィールドのラベル。
placeholder	いいえ	-	値が選択されていない場合に表示されるプレースホルダ テキスト。
value	いいえ	-	現在選択されている値。これは、リテラル文字列またはデータモデル内の値への参照です。
options	はい	-	選択可能なオプションのリスト。{label, value} オブジェクトの配列またはデータ バインディング参照を指定できます。
disabled	いいえ	false	選択コンポーネントが無効かどうか。
ariaLabel	いいえ	-	スクリーン リーダーで識別可能なテキスト。表示ラベルがない場合に、ユーザー補助のために推奨されます。
ariaLabelledby	いいえ	-	現在の要素にラベルを付ける要素（または複数の要素）を識別します。ユーザー補助に使用されます。
ariaDescribedby	いいえ	-	現在の要素を説明する要素を識別します。ユーザー補助に使用されます。
checks	いいえ	-	検証ルールの配列（それぞれに動的なブール条件とエラー メッセージが含まれる）。入力の有効性を判断するためにリアクティブに評価されます。
style	いいえ	-	要素に適用するインライン スタイル。
weight	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "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	いいえ	-	Flex コンテナに配置された要素のレイアウト ウェイト。

[
  {
    "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 基本カタログ コンポーネントのリファレンスを提供します。

注: Gemini Enterprise は A2UI バージョン v0.9 と v0.8 をサポートしています。A2UI のバージョンに関する詳細については、A2UI ドキュメントの 仕様バージョン を参照してください。

注: 基本カタログは、v0.8 では「標準カタログ」と呼ばれています。詳細については、0.8 コンポーネント モデルのドキュメントをご覧ください。

基本カタログ スキーマ ファイル

これらのプロパティの詳細については、以下をご覧ください。

• v0.9 基本カタログ定義（JSON スキーマ）
• v0.8 標準カタログ定義（JSON スキーマ）

基本カタログの共通プロパティ

すべてのコンポーネントは、特定のタイプに関係なく、構成可能な一連の共通プロパティを共有します。

プロパティ	必須	説明
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）	文字列	使用方法やスタイルのバリエーションに関するヒント（例: 「ヒーロー」）。

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	ボタン内に表示するコンポーネント（Text コンポーネントなど）の ID。
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: String 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: String 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）

リストからオプションを 1 つ以上選択します。このコンポーネントの名前は、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 コンポーネントは、エントリ ポイント コンポーネントによってトリガーされるオーバーレイ ダイアログです。

次の表に、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

注: パッケージ マネージャーの使用: A2UI リポジトリ内で組み込みのサンプル アプリケーションを実行するには、Corepack ワークスペースで構成された Yarn（yarn start gallery）が必要です。このリポジトリ外での通常の使用やスタンドアロン プロジェクトには、任意のパッケージ マネージャー（npm、pnpm など）を使用してください。

次のステップ

• 独自のカタログを定義する: 独自のコンポーネントを構築する
• テーマ設定ガイド: ブランドに合わせてコンポーネントのスタイルを設定します。