Swipe to Action
Alexaスワイプアクションレスポンシブ対応コンポーネント(AlexaSwipeToAction
)は、スワイプしてアクションを実行できる項目を表示します。このコンポーネントは、リスト項目のスワイプアクションを提供するAlexaTextListなどのリストで使用できます。項目の外観とユーザーが項目をスワイプしたときに実行するコマンドを制御できます。
alexa-layoutsパッケージを読み込む
AlexaSwipeToAction
を使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layouts
パッケージの最新バージョンは1.2.0
です。AlexaSwipeToAction
はバージョン1.2.0
で導入されました。
AlexaSwipeToActionのパラメーター
type
以外のパラメーターはすべてオプションです。
名前 | 型 | デフォルト | 説明 | 追加または更新されたバージョン |
---|---|---|---|---|
|
文字列 |
スワイプ中に表示するカスタムアイコンのソースです。 |
1.2.0 |
|
|
ユーザーが項目をスワイプしたときにアクションアイコンの背後に表示する背景の色です。 |
1.2.0 |
||
|
ユーザーが項目をスワイプしたときに表示するアクションアイコンの色です。 |
1.2.0 |
||
|
文字列 |
カスタム |
1.2.0 |
|
|
任意 |
オプションリストの最初のボタンにバインドするコマンドです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
文字列 |
オプションリストの最初のボタンのテキストです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
任意 |
オプションリストの2番目のボタンにバインドするコマンドです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
文字列 |
オプションリストの2番目のボタンのテキストです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
ディメンション |
@marginHorizontal |
オプションコンポーネントの右位置です。テレビデバイスにのみ使用します。 |
1.2.0 |
|
ディメンション |
序数に揃えます。 |
オプションコンポーネントの上位置です。テレビデバイスにのみ使用します。 |
1.2.0 |
|
任意 |
項目に使用するカスタムレイアウトの名前です。設定しない場合、コンポーネントは |
1.2.0 |
|
|
文字列 |
left |
スワイプジェスチャーの方向です。 |
|
|
任意 |
empty |
「空」のレーティングスロット(中が空の星など)を表すグラフィックです。 |
1.2.0 |
|
配列 |
[] |
このコンポーネントにバインドするentityデータの配列です。 |
1.2.0 |
|
任意 |
full |
「満点」のレーティングスロット(完全な星など)を表すグラフィックです。 |
1.2.0 |
|
任意 |
half |
「半分」のレーティングスロット(半分の星など)を表すグラフィックです。 |
1.2.0 |
|
ブール値 |
false |
|
1.2.0 |
|
ブール値 |
false |
trueの場合、デフォルトの左右のパディングを非表示にします。 |
1.2.0 |
|
ブール値 |
false |
trueの場合、項目の横に数字を表示しません。 |
1.2.0 |
|
文字列 |
center |
バウンディングボックス内での画像の位置を設定する方法を決定します。画像がバウンディングボックスより小さい場合に使用されます。オプションは、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。このプロパティは、 |
1.2.0 |
|
ブール値 |
false |
trueの場合、画像の背後にその画像のコピーをぼかして表示します。 |
1.2.0 |
|
文字列 |
best-fit |
バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。オプションは、none、fill、best-fit、best-fill、best-fit-downです。このプロパティは、 |
1.2.0 |
|
文字列 |
なし |
サムネイルとして項目の横に表示する画像のURIです。 |
1.2.0 |
|
任意 |
オプションリストが非表示の場合に実行するコマンドです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
任意 |
オプションリストが表示される場合に実行するコマンドです。テレビデバイスにのみ使用します。 |
1.2.0 |
|
|
任意 |
ユーザーがスワイプアクションを完了した場合に実行するコマンドです。 |
1.2.0 |
|
|
任意 |
ユーザーが項目をスワイプしたときに実行するコマンドです。 |
1.2.0 |
|
|
なし |
ユーザーが項目を選択したときに実行されるアクションです。 |
1.2.0 |
|
|
文字列 |
なし |
項目に表示する第1テキストです。 |
1.2.0 |
|
文字列 |
AVG |
レーティングに使用するグラフィックのタイプです。 |
1.2.0 |
|
数値 |
-1 |
0~5の数値のレーティングです。正の数を設定すると、数字が星評価として表示されます。負の数を設定するか、値を設定しない場合はレーティングが表示されません。 |
1.2.0 |
|
文字列 |
なし |
レーティング用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。 |
1.2.0 |
|
文字列 |
なし |
レーティングの横に表示するテキストです。 |
1.2.0 |
|
文字列 |
なし |
項目に表示する第2テキストです。 |
1.2.0 |
|
文字列 |
bottom |
|
1.2.0 |
|
任意 |
なし |
レーティングを表すために表示するグラフィックです。 |
1.2.0 |
|
なし |
レーティングを表す1つのグラフィックのバウンディングボックスの幅です。 |
1.2.0 |
|
|
文字列 |
なし |
項目に表示する第3テキストです。 |
1.2.0 |
|
文字列 |
right |
|
1.2.0 |
|
文字列 |
dark |
色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。 |
1.2.0 |
|
ブール値 |
false |
|
1.2.0 |
|
文字列 |
なし |
常に |
1.2.0 |
AlexaTextList内のAlexaSwipeToAction
AlexaTextList
内でAlexaSwipeToAction
を使用することで、ユーザーがスワイプして項目のリストをスクロール表示することができます。テキストリスト内では、AlexaSwipeToAction
プロパティに対応する次のAlexaTextList
プロパティを使って、AlexaSwipeToAction
項目のデフォルトを設定します。
swipeDirection
swipeActionIcon
swipeActionIconType
swipeActionIconForeground
swipeActionIconBackground
onSwipeMove
onSwipeDone
optionsButton1Text
optionsButton1Command
optionsButton2Text
optionsButton2Command
AlexaTextList
でスワイプを有効にするには、swipeDirection
をleft
かright
のいずれかに設定します。
たとえば、以下のAPLドキュメントとデータソースは、ユーザーが項目をスワイプできるAlexaTextList
を示しています。onSwipeDone
プロパティは、個々の項目レベルではなく、リストレベルで定義されます。ユーザーがスワイプを完了すると、デバイスはユーザーがスワイプしたリスト項目に関する情報とともにUserEvent
リクエストをスキルに送信します。
AlexaSwipeToActionの例
以下は、Container
内に配置されたAlexaSwipeToAction
のバリエーション例です。AlexaSwipeToAction
項目はボタンのテキストとアクションも設定しており、ユーザーはスワイプのほかにテレビリモコンを使ってテレビを操作することができます。
ハブデバイスで項目のスワイプを開始すると、ヘッダーが更新され、スワイプの進捗状況が表示されます。スワイプを完了すると、ヘッダーが更新され、スワイプが完了したことが表示されます。
テレビデバイスでリモコンを使って項目をハイライト表示すると、項目には2つのオプションボタンが表示されます。いずれかのボタンを選択すると、ヘッダーが更新され選択が終了したことが表示されます。
関連トピック
最終更新日: 2020 年 11 月 20 日