Icon Button

Icon Button

Alexa Icon Buttonレスポンシブ対応コンポーネント（AlexaIconButton）は、ベクターグラフィックをボタンとして表示します。ユーザーは、タッチまたはコントローラーでボタンを選択できます。開発者は、表示するグラフィック、ボタンのスタイル、ボタンを選択したときに実行するコマンドを指定します。AlexaIconButtonは、disabled、pressed、focusedなどのさまざまな状態を自動的に処理します。

互換性

AlexaIconButtonは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。

  • すべての円形デバイスプロファイル
  • すべての横長デバイスプロファイル
  • すべての縦長デバイスプロファイル
  • すべてのモバイルプロファイル
  • すべてのテレビプロファイル

サポートされていないViewportでAlexaIconButtonを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaIconButtonを使用するには、alexa-layoutsパッケージをインポートします。

alexa-layoutsパッケージの最新バージョンは1.7.0です。AlexaIconButtonはバージョン1.1.0で導入されました。

AlexaIconButtonのパラメーター

type以外のパラメーターはすべてオプションです。

名前 型 デフォルト 説明 ウィジェットのサポート 追加されたバージョン

accessibilityLabel

文字列

icon

ボタンを説明する文字列です。ユーザーがボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。

サポートされません

1.1.0

buttonId

文字列

AlexaIconButtonの一意の識別子です。

サポートされません

1.2.0

buttonSize

ディメンション

72dp

アイコンボタンのサイズ（高さと幅）です。

サポートされません

1.1.0

buttonStyle

文字列

image

imageまたはcontainedです。imageの場合、ボタンは指定されたベクターグラフィックをそのまま表示します。containedの場合、塗りつぶされた円の上にアイコンが表示されます。

サポートされません

1.1.0

entities

配列

—

このコンポーネントにバインドするentityデータの配列です。

サポートされません

1.2.0

primaryAction

コマンド

—

ユーザーがボタンを選択したときにトリガーするコマンドです。

サポートされません

1.1.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。

サポートされません

1.1.0

type

文字列

—

常にAlexaIconButtonに設定します。

サポートされません

1.1.0

vectorSource

文字列

—

AVGパスの描画データです。これは、Alexa Vector GraphicのpathDataプロパティに含める値と同じです。グラフィックは、24dp×24dpのボックスに収まる必要があります。ベクターグラフィックのパスデータの定義の詳細については、pathDataを参照してください。

サポートされません

1.1.0

アクセシビリティ

AlexaIconButtonコンポーネントは、ボタンとして構成されたタッチ可能なコンポーネントです。VoiceViewスクリーンリーダーが有効になっているデバイスでは、ユーザーはコンポーネントをタップして選択し、画面をダブルタップしてボタンをアクティブにすることができます。

スクリーンリーダーは、accessibilityLabel文字列を読み上げてAlexaIconButtonnコンポーネントを説明します。accessibilityLabelは、デフォルトで「icon」という文字列になります。 このプロパティは、ボタンの機能を説明する値に設定してください。

アクセシビリティとAPLの詳細については、APLアクセシビリティガイドを参照してください。

AlexaIconButtonの例

次の例では、デフォルトのimageスタイルを使用して「ホーム」アイコンボタンを表示します。

{
  "type": "AlexaIconButton",
  "buttonSize": "72dp",
  "vectorSource": "M21.343,8.661l-7.895-7.105c-0.823-0.741-2.073-0.741-2.896,0L2.657,8.661C2.238,9.039,2,9.564,2,10.113V20c0,1.105,0.943,2,2.105,2H9v-9h6v9h4.895C21.057,22,22,21.105,22,20v-9.887C22,9.564,21.762,9.039,21.343,8.661z",
  "primaryAction": {
    "type": "SetValue",
    "componentId": "textToUpdate",
    "property": "text",
    "value": "${exampleData.imageStyleText}"
  }
}

次のドキュメント全体の例では、データ配列のインフレートを使用して、buttonStyleプロパティとcontainedプロパティの組み合わせが異なる4つのアイコンボタンを表示します。

このページは役に立ちましたか？

最終更新日: 2025 年 11 月 04 日