Progress Bar Radial



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以外のパラメーターはすべてオプションです。

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

accessibilityLabel

文字列

"[Total]のうち[Progress]経過しました"。たとえば、[2分]のうち[20秒]経過しましたなど。

プログレスバーを説明する文字列です。ユーザーがコンポーネントを選択したときに、この文字列が読み上げられます。

1.2.0

bufferValue

数値

0

determinateプログレスバーで経過したバッファ時間を表す値です。プログレスバーは、明るい色で塗りつぶすことによって、この値を表します。バッファーバーは、bufferValueがprogressValueより大きい場合に表示されます。progressBarTypeの値がdeterminateで、isLoadingがfalseの場合に適用されます。

1.2.0

entities

配列

[]

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

1.2.0

progressBarType

文字列

determinate

表示するプログレスバーの種類を決定します。determinate、indeterminateのいずれかに設定します。

determinate – 一定の時間を表すバーです。progressValueプロパティを経過時間で更新してバーを埋めます。

indeterminate – 継続中のアクティビティを表すアニメーションを表示するプログレスバーです。ただし、バーは時間とは紐づけられていません。

1.2.0

progressFillColor

色

@colorComponent

determinateプログレスバーの進行状況を表す塗りつぶしの色です。

1.2.0

progressValue

数値

0

determinateプログレスバーの経過時間を表す値です。プログレスバーは、progressFillColorに指定した色で塗りつぶすことによって、この値を表します。progressBarTypeがdeterminateの場合に適用されます。このプロパティを更新して継続中の進行状況を表す方法の詳細については、determinateプログレスバーを進めるを参照してください。

1.2.0

theme

文字列

dark

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

1.2.0

totalValue

数値

0

プログレスバーが表すトータル時間の値（ミリ秒）です。たとえば、totalValueを100,000に設定すると1分40秒を表すプログレスバーを作成できます。この値がバーのサイズに影響することはありません。プログレスバーは、常に小型の円形viewportの円周になります。

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の詳細については、ティックイベントハンドラーを参照してください。

AlexaProgressBarRadialの例

以下は、小型の円形デバイス上にAlexaProgressBarRadialを表示し、その他すべてのviewportにAlexaProgressBarを表示するドキュメントの完全な例です。この例では、データソースを使って円形、長方形のレイアウト両方に同じ値を表示しています。

AlexaProgressBarRadial
AlexaProgressBarRadial