Check Box



Check Box

CheckBoxレスポンシブ対応コンポーネント(AlexaCheckbox)は、ユーザーがチェック状態を切り替えられるチェックボックスを表示します。チェックボックスのサイズ、色、ユーザーがチェックボックスを操作したときに実行するコマンドを制御できます。

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

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

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

AlexaCheckboxのパラメーター

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

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

accessibilityLabel

文字列

なし

チェックボックスを説明する文字列です。ユーザーがボックスを選択したときに、この文字列が読み上げられます。

1.2.0

checkboxHeight

ディメンション

viewportに基づく高さ

チェックボックスの高さです。

1.2.0

checkboxWidth

ディメンション

viewportに基づく幅

チェックボックスの幅です。

1.2.0

entities

配列

[]

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

1.2.0

primaryAction

コマンド

なし

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

1.2.0

selectedColor

青色。具体的な色調は指定したthemeによって異なります。

チェックボックス選択時(checkedtrue)に塗りつぶしに使われる色です。

1.2.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。

1.2.0

type

文字列

なし

常にAlexaCheckboxに設定されます。

1.2.0

checked(チェック)状態

AlexaCheckboxは、標準のcheckedコンポーネント状態を使って、コンポーネントをチェック済み、チェックなしのどちらで表示するかを判断します。ドキュメントにコンポーネントを配置したら、checkedtruefalseに初期化します。

  • checkedtrueに設定すると、チェックボックスは単色で塗りつぶされ、チェックマークが表示されます。
  • falseに設定すると、枠線と空のボックスが表示されます。コンポーネントのchecked状態のデフォルトはfalseです。

AlexaCheckboxには、indeterminateという3つ目の状態があります。この状態は、チェックボックスが「部分的に」選択されているというシナリオで使用します。たとえば、サブオプションのグループを表すチェックボックスの一部が選択され、一部が選択されていない場合などです。この状態の詳細については、isIndeterminateプロパティを参照してください。

ユーザーがチェックボックスを操作すると、コンポーネントは自動的にchecked状態を切り替えます。手動でchecked状態をトラッキングしたり、更新したりする必要はありません。

以下の例では、チェックボックスを2行にわたって表示しています。1行目のチェックボックスは、checkedtrueに初期化しています。2行目は、checkedをデフォルトのfalseのままにしています。

checked状態をオンとオフに設定したデフォルトのチェックボックスの例
checked状態をオンとオフに設定したデフォルトのチェックボックスの例

disabled(無効)状態

AlexaCheckboxは、標準のdisabledコンポーネント状態を使って、コンポーネントを有効、無効のどちらとして表示するかを判断します。disabledtrueの場合、チェックボックスはタッチやリモートなどのユーザー操作に一切反応しません。

disabled状態は、checked状態に依存しません。このため、無効のチェックボックスは、いずれのチェック状態でも表示できます。

以下の例では、disabledのチェックボックスを2列にわたって表示しています。1行目のチェックボックスは、checkedtrueに設定しています。2行目は、checkedをデフォルトのfalseのままにしています。

checked状態とdisabled状態の組み合わせ
checked状態とdisabled状態の組み合わせ

isIndeterminate

AlexaCheckboxは、isIndeterminateプロパティを使って3つ目のチェックボックス状態を表します。isIndeterminateがtrueの場合、チェックボックスは単色で塗りつぶされ、チェックマークではなく横線が表示されます。

この状態を使って、「部分的に」選択されたチェックボックスを表します。たとえば、それぞれがチェックボックスを持つ、項目のリストを表示するとします。ヘッダーには、代表のチェックボックスを1つ表示し、リスト全体の状態を表します。項目の一部が選択されている場合、ヘッダーのチェックボックスを不確定状態として表示します。

ユーザーがチェックボックスをオン/オフすると、AlexaCheckboxchecked状態を切り替え、isIndeterminateをデフォルトのfalseに設定します。チェックボックスの最終結果は、checkedを切り替えた結果によって異なります。たとえば、次のようになります。

  • checkedtrueisIndeterminatetrue
    • チェックボックスは不確定状態です。
    • ユーザーがチェックボックスをオンにすると、コンポーネントはcheckedisIndeterminateの両方をfalseに更新します。チェックボックスはオフ状態に変わります。
  • checkedfalseisIndeterminatetrue
    • チェックボックスは不確定状態です。
    • ユーザーがチェックボックスをオンにすると、コンポーネントはcheckedtrueisIndeterminateをfalseに更新します。チェックボックスはオン状態に変わります。

どちらのシナリオでも、ユーザーがもう一度チェックボックスをオンにすると、コンポーネントはcheckedを更新しますが、isIndeterminateは変更しません。チェックボックスが自動的にisIndeterminate状態に戻ることはありません。ユーザーの操作中にisIndeterminatetrueに設定するには、SetValueコマンドを使用します。

不確定状態をほかの状態と組み合わせた例
不確定状態をほかの状態と組み合わせた例

AlexaCheckboxの例

以下は、異なる色とサイズの複数のチェックボックスを表示するドキュメント全体とデータソースの例です。チェックボックスはデータソースで指定します。各行には、ダークとライトのテーマで同じチェックボックスを表示しています。チェックボックスをオンにすると、ユーザー定義のコマンドが実行され、ヘッダーのサブタイトルがオンにされたチェックボックスに関する情報で更新されます。コマンドは、AlexaCheckboxの現在のchecked状態をevent.source.checkedプロパティから取得します。

異なる色とサイズのAlexaCheckboxの例
異なる色とサイズのAlexaCheckboxの例