Check Box
CheckBoxレスポンシブ対応コンポーネント(AlexaCheckbox
)は、ユーザーがチェック状態を切り替えられるチェックボックスを表示します。チェックボックスのサイズ、色、ユーザーがチェックボックスを操作したときに実行するコマンドを制御できます。
alexa-layoutsパッケージを読み込む
AlexaCheckbox
を使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layouts
パッケージの最新バージョンは1.2.0
です。AlexaCheckbox
はバージョン1.2.0
で導入されました。
AlexaCheckboxのパラメーター
type
以外のパラメーターはすべてオプションです。
名前 | 型 | デフォルト | 説明 | 追加または更新されたバージョン |
---|---|---|---|---|
|
文字列 |
なし |
チェックボックスを説明する文字列です。ユーザーがボックスを選択したときに、この文字列が読み上げられます。 |
1.2.0 |
|
viewportに基づく高さ |
チェックボックスの高さです。 |
1.2.0 |
|
|
viewportに基づく幅 |
チェックボックスの幅です。 |
1.2.0 |
|
|
配列 |
[] |
このコンポーネントにバインドするentityデータの配列です。 |
1.2.0 |
|
なし |
ユーザーがチェックボックスを選択したときに実行されるアクションです。 |
1.2.0 |
|
|
青色。具体的な色調は指定した |
チェックボックス選択時( |
1.2.0 |
|
|
文字列 |
dark |
色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。 |
1.2.0 |
|
文字列 |
なし |
常に |
1.2.0 |
checked(チェック)状態
AlexaCheckbox
は、標準のcheckedコンポーネント状態を使って、コンポーネントをチェック済み、チェックなしのどちらで表示するかを判断します。ドキュメントにコンポーネントを配置したら、checked
をtrue
かfalse
に初期化します。
checked
をtrue
に設定すると、チェックボックスは単色で塗りつぶされ、チェックマークが表示されます。false
に設定すると、枠線と空のボックスが表示されます。コンポーネントのchecked
状態のデフォルトはfalse
です。
AlexaCheckbox
には、indeterminateという3つ目の状態があります。この状態は、チェックボックスが「部分的に」選択されているというシナリオで使用します。たとえば、サブオプションのグループを表すチェックボックスの一部が選択され、一部が選択されていない場合などです。この状態の詳細については、isIndeterminateプロパティを参照してください。
ユーザーがチェックボックスを操作すると、コンポーネントは自動的にchecked
状態を切り替えます。手動でchecked
状態をトラッキングしたり、更新したりする必要はありません。
以下の例では、チェックボックスを2行にわたって表示しています。1行目のチェックボックスは、checked
をtrue
に初期化しています。2行目は、checked
をデフォルトのfalse
のままにしています。

disabled(無効)状態
AlexaCheckbox
は、標準のdisabledコンポーネント状態を使って、コンポーネントを有効、無効のどちらとして表示するかを判断します。disabled
がtrue
の場合、チェックボックスはタッチやリモートなどのユーザー操作に一切反応しません。
disabled
状態は、checked
状態に依存しません。このため、無効のチェックボックスは、いずれのチェック状態でも表示できます。
以下の例では、disabledのチェックボックスを2列にわたって表示しています。1行目のチェックボックスは、checked
をtrue
に設定しています。2行目は、checked
をデフォルトのfalse
のままにしています。

isIndeterminate
AlexaCheckbox
は、isIndeterminate
プロパティを使って3つ目のチェックボックス状態を表します。isIndeterminate
がtrueの場合、チェックボックスは単色で塗りつぶされ、チェックマークではなく横線が表示されます。
この状態を使って、「部分的に」選択されたチェックボックスを表します。たとえば、それぞれがチェックボックスを持つ、項目のリストを表示するとします。ヘッダーには、代表のチェックボックスを1つ表示し、リスト全体の状態を表します。項目の一部が選択されている場合、ヘッダーのチェックボックスを不確定状態として表示します。
ユーザーがチェックボックスをオン/オフすると、AlexaCheckbox
はchecked
状態を切り替え、isIndeterminate
をデフォルトのfalse
に設定します。チェックボックスの最終結果は、checked
を切り替えた結果によって異なります。たとえば、次のようになります。
checked
がtrue
でisIndeterminate
がtrue
–- チェックボックスは不確定状態です。
- ユーザーがチェックボックスをオンにすると、コンポーネントは
checked
とisIndeterminate
の両方をfalseに更新します。チェックボックスはオフ状態に変わります。
checked
がfalse
でisIndeterminate
がtrue
–- チェックボックスは不確定状態です。
- ユーザーがチェックボックスをオンにすると、コンポーネントは
checked
をtrue
、isIndeterminate
をfalseに更新します。チェックボックスはオン状態に変わります。
どちらのシナリオでも、ユーザーがもう一度チェックボックスをオンにすると、コンポーネントはchecked
を更新しますが、isIndeterminate
は変更しません。チェックボックスが自動的にisIndeterminate
状態に戻ることはありません。ユーザーの操作中にisIndeterminate
をtrue
に設定するには、SetValue
コマンドを使用します。

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