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 文字列 画像をコンテナに収める方法（「cover」など）。
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 コンポーネントを使用すると、リストから 1 つ以上のオプションを選択できます。

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

次のステップ