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以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
なし |
ボタンを説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。 |
1.1.0 |
|
|
72dp |
アイコンボタンのサイズ（高さと幅）です。 |
1.1.0 |
|
|
|
文字列 |
画像 |
|
1.1.0 |
|
|
なし |
ユーザーがボタンを選択したときに実行されるコマンドです。 |
1.1.0 |
|
|
|
文字列 |
'dark' |
指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。 |
1.1.0 |
|
|
文字列 |
なし |
常に |
1.1.0 |
|
|
文字列 |
なし |
AVGパスの描画データです。これは、Alexa Vector Graphicの |
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}"
}
}
