Button



Button

Buttonレスポンシブ対応コンポーネント(AlexaButton)は、タッチパネルやコントローラーで選択できるボタンを表示します。ボタンに表示されるテキスト、ボタンの外観、ボタンを選択したときに実行されるコマンドを設定できます。

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

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

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

AlexaButtonのパラメーター

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

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

accessibilityLabel

文字列

なし

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

1.1.0

buttonStyle

文字列

contained

ボタンのスタイルです。containedまたはoutlinedを設定できます。デフォルトはcontainedです。

contained: ボタンが半透明の背景色で塗りつぶされます。
outlined: ボタンの枠線は単色で描画されますが、本体は透明です。

ボタンの色はthemeに基づいています。

1.1.0

buttonText

文字列

なし

ボタンに表示されるテキストです。ボタンの目的を示します。

1.1.0

primaryAction

コマンド

なし

ユーザーがボタンを選択したときに実行されるアクションです。

1.1.0

theme

文字列

dark

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

1.1.0

type

文字列

なし

常にAlexaButtonに設定されます。

1.1.0

AlexaButtonの例

この例では2つのボタンが表示されています。1つはcontainedスタイル、もう1つはoutlinedスタイルが設定されたボタンです。これらのボタンを選択すると、スキルにUserEventが送信されます。

{
  "type": "Container",
  "width": "100%",
  "height": "100%",
  "justifyContent": "center",
  "items": [
    {
      "type": "AlexaButton",
      "buttonText": "Contained Style",
      "id": "containedButtonId",
      "paddingLeft": "@spacingLarge",
      "paddingRight": "@spacingLarge",
      "paddingBottom": "@spacingLarge",
      "paddingTop": "@spacingLarge",
      "primaryAction": {
        "type": "SendEvent",
        "componentId": "containedButtonId",
        "arguments": [
          "contained"
        ]
      }
    },
    {
      "type": "AlexaButton",
      "buttonText": "Outlined Style",
      "buttonStyle": "outlined",
      "id": "outlinedButtonId",
      "paddingLeft": "@spacingLarge",
      "paddingRight": "@spacingLarge",
      "paddingBottom": "@spacingLarge",
      "paddingTop": "@spacingLarge",
      "primaryAction": {
        "type": "SendEvent",
        "componentId": "outlinedButtonId",
        "arguments": [
          "outlined"
        ]
      }
    }
  ]
}