Icon Button

Icon Button

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

alexa-layoutsパッケージを読み込む

AlexaIconButtonを使用するには、alexa-layoutsパッケージを読み込みます。

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

AlexaIconButtonパラメーター

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

名前 型 デフォルト 説明 追加されたバージョン

accessibilityLabel

文字列

なし

ボタンを説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。

1.1.0

buttonSize

ディメンション

72dp

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

1.1.0

buttonStyle

文字列

画像

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

1.1.0

primaryAction

コマンド

なし

ユーザーがボタンを選択したときに実行されるコマンドです。

1.1.0

theme

文字列

'dark'

指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。

1.1.0

type

文字列

なし

常にAlexaIconButtonに設定されます。

1.1.0

vectorSource

文字列

なし

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

1.1.0

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}"
  }
}