Progress Bar Radial
Alexa progress barレスポンシブ対応コンポーネント(AlexaProgressBarRadial
)は、進行中のアクティビティを示す円形のプログレスバーを表示します。さまざまなスタイルから選択して、さまざまなタイプのアクティビティ進捗状況を伝えることができます。このコンポーネントは、Echo Spotなどの小型の円形デバイスで使用します。
alexa-layoutsパッケージを読み込む
AlexaProgressBarRadial
を使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layouts
パッケージの最新バージョンは1.4.0
です。AlexaProgressBarRadial
はバージョン1.2.0
で導入されました。
AlexaProgressBarRadialパラメーター
type
以外のパラメーターはすべてオプションです。
名前 | 型 | デフォルト | 説明 | 追加または更新されたバージョン |
---|---|---|---|---|
|
文字列 |
"[Total]のうち[Progress]経過しました"。たとえば、[2分]のうち[20秒]経過しましたなど。 |
プログレスバーを説明する文字列です。ユーザーがコンポーネントを選択したときに、この文字列が読み上げられます。 |
1.2.0 |
|
数値 |
0 |
|
1.2.0 |
|
配列 |
[] |
このコンポーネントにバインドするentityデータの配列です。 |
1.2.0 |
|
文字列 |
determinate |
表示するプログレスバーの種類を決定します。 |
1.2.0 |
|
|
1.2.0 |
||
|
数値 |
0 |
|
1.2.0 |
|
文字列 |
dark |
色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。 |
1.2.0 |
|
数値 |
0 |
プログレスバーが表すトータル時間の値(ミリ秒)です。たとえば、 |
1.2.0 |
円形viewport上にプログレスバーを配置する
小型の円形デバイスにAlexaProgressBarRadial
を表示するには、when
プロパティを使用します。
"when": "${@viewportProfile == @hubRoundSmall}"
コンポーネントは、長方形のデバイス上での表示用にはデザインされていません。長方形のデバイスには、代わりにAlexaProgressBar
を使用します。
Viewportにほかのコンポーネントを追加するには、Container
にAlexaProgressBarRadial
を配置してposition
をabsolute
に設定します。その後、AlexaProgressBarRadial
の後にほかのコンポーネントを追加します。これにより、ほかのコンポーネントがオーバーラップしてプログレスバーコンポーネントの上に表示されます。コンポーネントは、円形のプログレスバーの中に表示されます。
以下は、プログレスバーとText
コンポーネントを表示する条件付きのContainer
の例です。Text
コンポーネントは、データソースからのコンテンツを表示します。
{
"when": "${@viewportProfile == @hubRoundSmall}",
"type": "Container",
"height": "100%",
"width": "100%",
"items": [
{
"type": "AlexaProgressBarRadial",
"id": "roundHubBar",
"progressBarType": "indeterminate",
"position": "absolute"
},
{
"type": "Text",
"height": "100%",
"textAlignVertical": "center",
"textAlign": "center",
"text": "${progressBarRadialExample.textToShow}"
}
]
}
determinateプログレスバーを進める
determinateプログレスバーの場合、progressValue
とbufferValue
のプロパティを更新してバーを色で塗りつぶします。SetValue
コマンドを使用して値を変更します。
以下は、AlexaProgressBarRadial
のprogressValue
プロパティのid
「myProgressBar」を40,000に設定する例です。
{
"type": "SetValue",
"componentId": "myProgressBar",
"property": "progressValue",
"value": 40000
}
時間に基づいて自動で進むプログレスバーを作成するには、SetValue
を実行するティックイベントハンドラーを定義します。APLは、時間の経過とともにティックイベントを生成します。handleTick
プロパティを使用して、各ティックで実行するコマンドの配列を定義します。
以下の例では、プログレスバーが完了するまでに毎秒約1回progressValue
が更新されます。
{
"type": "AlexaProgressBarRadial",
"progressValue": "0",
"totalValue": "100000",
"progressFillColor": "blue",
"position": "absolute",
"handleTick": [
{
"when": "${progressValue < totalValue}",
"minimumDelay": 1000,
"commands": [
{
"type": "SetValue",
"property": "progressValue",
"value": "${progressValue + 1000}"
}
]
}
]
}
handleTick
を使用するには、APL 1.4以降が必要です。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。handleTick
の詳細については、ティックイベントハンドラーを参照してください。
AlexaProgressBarRadialの例
以下は、小型の円形デバイス上にAlexaProgressBarRadial
を表示し、その他すべてのviewportにAlexaProgressBar
を表示するドキュメントの完全な例です。この例では、データソースを使って円形、長方形のレイアウト両方に同じ値を表示しています。
