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