バッジ

概要

Avonni Badge コンポーネントは、Salesforce のダイナミックコンポーネント内で情報を強調するカラフルで目を引くラベルを追加します。単一の項目向けに設計されています—複数のバッジには Chip Container を使用してください。

主な機能には次のものがあります：

• 簡潔なラベル： 短いテキスト、数字、またはフレーズを表示します。

• スタイルのバリエーション： 異なる意味合いに合わせた色分けオプション（例：成功、警告）。

• オプションのアバター： コンテキスト用にアイコン、画像、またはイニシャルを追加します。

• 注目を集める： UI の明確さと視覚的な魅力を高めます。

ヒント： リストやカードと組み合わせて項目に動的にタグ付けしてください。

使用例

• 新しい項目の表示： 新製品、機能、またはコンテンツ（例：「New」）を示します。

• 通知カウント： 未読メッセージやアラートを表示します（例：「5+」）。

• 製品ラベル： 「Sale」「Bestseller」「New Arrival」などの項目を分類します。

• ユーザーステータス： 役割や状態（例：「Online」「Admin」）を表示します。

• ステータスマーカー： プロセスの段階を示します（例：「Approved」「Pending」）。

構成

キャンバス上で Badge を選択して、右側のプロパティパネルでプロパティにアクセスします。

基本プロパティ

これらはコアのテキストと識別を扱います。

ベストプラクティス： 明確で短いラベルを使用し、リアルタイム更新のために変数にバインドしてください（例：クエリからのカウント）。

外観とバリアント

これらは視覚スタイルを制御します。

ヒント： プロパティパネルでバリアントをプレビューしてテーマに合わせてください。

アバター（オプション）

コンテキストのための視覚要素を追加します。

：最大値。

例 1：シンプルなステータスバッジ

1. プロパティの設定：

   • ラベル: "Approved"

   • バリアント: success

結果： レコードなどでポジティブな状態を示す緑のバッジ。

例 2：アバター付き通知カウント

1. 変数を作成： Number 変数 unreadCount を追加します。

2. プロパティの設定：

   • ラベル: {!unreadCount}

   • バリアント: warning

   • アバターソース: アイコン standard:scan_card（または画像 URL をバインド）

   • アバターサイズ: small

   • アバター形状: circle

結果： 変数で更新されるアイコン付きの動的な黄色いバッジでカウントを表示します。

例 3：ユーザーロールバッジ

1. プロパティの設定：

   • ラベル: "Admin"

   • バリアント: info

   • アバターソース: イニシャル "AD"

   • アバター形状: square

結果： プロフィールで役割を示すイニシャル入りの青いバッジ。

なぜ Badge コンポーネントを使うのか？

• 重要情報を強調： 更新や詳細に注目を集めます。

• 視覚的に分類： 属性やステータスで項目をグループ化します。

• ステータスを表示： 進捗や状態を明確に伝えます（例：「Complete」）。

• UI の魅力を高める： 色と明確さを加えてエンゲージメントを向上させます。

重要な考慮点

• 単一対複数： Badge あたり一つの項目に留めてください；リストには Chip Container を使用します。

• ラベルのベストプラクティス： 短く、明確で、目的に沿ったものにして混乱を避けてください。

• バリアントの選択： 直感的な UX のために意味に合わせて色を一致させてください（例：エラーには赤）。

• アバターの使用： 関連がある場合にのみ追加し、ソースが利用可能であることを確認してください（例：有効な URL）。

• 動的バインディング： レコードなどからのコンテキストに応じたバッジのためにラベル/アバターをバインドしてください。

• アクセシビリティ： コントラストのある色を使用し、可能であればアバターに代替テキストを提供してください。

よくある問題のトラブルシューティング

• バッジが表示されない： 非表示のスタイルになっていないかバリアントを確認し、ラベルが空でないことを確認してください。

• アバターが読み込まれない： ソース（URL/アイコン名）を確認し、静的値でバインディングをテストしてください。

• ラベルが長すぎる： テキストを短くしてください—バッジは切り詰められます；必要ならカスタムスタイルで省略記号を使用してください。

• 色の衝突： 異なるテーマでプレビューし、読みやすさのためにバリアントを調整してください。

• 動的要素がない： 変数/式へのバインディングを確認してください； プレビュー モードでデバッグしてください。.

概要

Avonni Badge コンポーネントは、Salesforce の UI を強調し向上させるための鮮やかなラベルを作成します。バリアントやアバターを使えば、ステータスや通知などに柔軟に対応できます。関連コンポーネントについては Avonni Chip Container や Icons ガイドを参照してください。