Progress Dots

Progress Dots

Alexa Progress Dotsレスポンシブ対応コンポーネント（AlexaProgressDots）は、アクションが進行中であることを示すアニメーション化されたドットを表示します。

互換性

AlexaProgressDotsは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。

  • すべての円形デバイスプロファイル
  • すべての横長デバイスプロファイル
  • すべての縦長デバイスプロファイル
  • すべてのモバイルプロファイル
  • すべてのテレビプロファイル

サポートされていないViewportでAlexaProgressDotsを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaProgressDotsを使用するには、alexa-layoutsパッケージをインポートします。

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

AlexaProgressDotsのパラメーター

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

名前 型 デフォルト 説明 ウィジェットのサポート 追加されたバージョン

accessibilityLabel

文字列

accessibilityLabel

スクリーンリーダーを使用するユーザーに、プログレスドットについて説明するアクセシビリティラベルです。

サポートされません

1.2.0

componentId

文字列

AlexaProgressDots

このコンポーネントの一意のIDです。同じドキュメント内のAlexaProgressDotsのインスタンスごとに、個別の一意のIDを指定します。

サポートされません

1.2.0

dotSize

ディメンション

32dp

プログレスドットのサイズです。

サポートされません

1.2.0

entities

配列

—

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

サポートされません

1.2.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。

サポートされません

1.2.0

type

文字列

—

常にAlexaProgressDotsに設定します。

サポートされません

1.2.0

AlexaProgressDotsの例

次の例は、異なるサイズと設定が適用されたプログレスドットを示しています。

次の例は、AlexaProgressDotsをコンテンツに重ねて配置した後、コンテンツが読み込み中であることを示すときに表示する方法を示しています。ボタンをクリックすると、コンテンツの上にプログレスドットが表示されます。例を最初から再実行するには、ページを更新するかViewportを変更します。実際のスキルでは、SendEventコマンドからスキルにリクエストが送信されたら、スキルでコンテンツを読み込んだ後、表示をリセットしてプログレスドットを非表示にするコマンドを含むExecuteCommandsディレクティブを返すことができます。

このページは役に立ちましたか？

最終更新日: 2025 年 11 月 19 日