プログレスバー

概要

Avonni プログレスバーコンポーネントは、Experience Cloud サイト内で目標や完了状況を表現するための、動的で視覚的に魅力的な方法を提供します。進行中のプロセス、タスクの完了、またはその他の進行指標の状況について、ユーザーに即時の視覚的フィードバックを提供します。

設定

🎛️ プロパティ

名前	説明	使用法
ラベル	プログレスバーの目的を識別するために表示されるテキスト。	このプロパティを実装して、バーが示している進行内容をユーザーに明確に理解させます。
値	現在の進行状況を表す数値。	このプロパティを設定して、タスクやプロセスの完了した割合（パーセンテージや分数）を反映させます。
値ラベル	値の横に表示されるラベルで、通常はパーセンテージや分数として表示されます。	進行値のテキスト表現を提供して、ユーザーに分かりやすくします。
値の位置	プログレスバーに対する値ラベルの位置。オプションは次のとおりです 右上, 左, 右, 左上, 右下、および 左下.	可読性を高め、周囲のコンテンツのデザインに合う値の位置を選択してください。
サイズ	プログレスバーの太さ。オプションは次のとおりです フル, エックススモール, 小, 中、および 大.	プログレスバーが目立ち、全体のデザインレイアウトと調和するサイズを選択してください。
向き	プログレスバーが塗りつぶされる方向。次のいずれかに設定できます 水平 または 垂直.	直感的な進行の視覚化のために、配向をレイアウトやコンテンツの流れの方向に合わせてください。
値を表示	進行値ラベルを表示するか非表示にするトグル。	この設定を使用して、バー上に数値の進行を直接表示してユーザーの参照にするか、デザインをすっきりと最小限に保つかを選択できます。
バリアント	プログレスバーの形状。オプションは次のとおりです ベース 直線バーの場合 円形 丸い進行インジケータの場合。	サイトのデザインモチーフや表示する進行の種類に最も適したバリアントを選択してください。
テクスチャード	追加の視覚的ディテールのためにプログレスバーにテクスチャ効果を追加します。	このプロパティを適用して、プログレスバーにより動的で触覚的な外観を作り出します。
テーマ	進行の性質や状態を示す事前定義されたカラーテーマ。利用可能なテーマには次があります ベース, 代替インバース, エラー, 情報, インバース, オフライン, 成功、および 警告.	異なる意味を伝えるためにテーマを選択します。例えば、完了したタスクには 成功 完了したタスク用、または 警告 保留中のアクション用です。
太さ	プログレスバーの太さを調整します。オプションは次のとおりです 中, エックススモール, 小、および 大.	プログレスバーの存在感と他のサイト要素との美的な互換性を確保する太さを選択してください。

🎨 スタイリング