アイコン

Icon コンポーネントは、Avonni Dynamic Components 内でアイコンを表示するためのものです。標準の Salesforce Lightning Design System (SLDS) アイコンをサポートし、Avonni によって提供されるカスタムアイコンを含む場合があります。アイコンはコンポーネントの視覚的魅力と使いやすさを高めます。

概要

Icon コンポーネントは単純な視覚要素です。次の用途で使用されます：

アクションや状態を視覚的に表現する。
ナビゲーションの視覚的手がかりを提供する。
視覚的な興味を追加する。
アクセシビリティを向上させる（適切な代替テキストを使用する場合）。

プロパティ

Icon コンポーネントにはプロパティパネルに次のプロパティがあります：

API 名：コンポーネントの一意の識別子。
アイコン名：（テキスト）アイコンの名前。使用方法：
- SLDS アイコン：形式：category:name（例：standard:account、utility:add）。使用可能なアイコンは Salesforce Lightning Design System のドキュメントで確認してください。
- Avonni カスタムアイコン：名前については Avonni のドキュメントを参照してください。
- 動的値：Variable、Constant、または Formula を使用できます。
アイコンサイズ：（テキスト）アイコンのサイズ。一般的なオプションには次のものが含まれます：
- を設定し、
- 小
- 中
- 大
- x-large
バリアント：（テキスト）アイコンのスタイル（色）。次の場合にのみ機能します： utility アイコン。オプションには次のものがよく含まれます：
- base
- Flow が
- warning
- success
- inverse
タイトル：（テキスト）アイコンの代替テキスト。アクセシビリティのために必須です！このテキストは：
- スクリーンリーダーによって使用されます。
- ホバー時にツールチップとして表示されます（ほとんどのブラウザで）。アイコンの説明は目的、外観だけでなく目的を記述してください。例：「Create New Account」（新規アカウント作成）であって「Plus Sign」（プラス記号）ではありません。
表示：（ブール）表示を制御し、動的な表示/非表示に対応します。

：最大値。

例 1：静的なアカウントアイコン

アイコン名: standard:account
アイコンサイズ：medium
バリアント：base
タイトル：Account Icon

これは標準の Salesforce アカウントアイコンを表示します。

例 2：動的アイコン（Formula）

アイコン名：myStatusIcon（これは Formula リソースです）
アイコンサイズ：small
バリアント：inverse
タイトル：Opportunity Status

myStatusIcon Formula リソースには次が含まれている可能性があります：

IF(OpportunityStageName = 'Closed Won', 'utility:check', IF(OpportunityStageName = 'Closed Lost', 'utility:close', 'utility:help' ) )

これは Opportunity の StageName に基づいてアイコンを変更します。

変数が更新され、それらの値を使用してデータテーブルをフィルタリングできます。

アクセシビリティ: 常に意味のあるタイトルを提供してください。
SLDS 準拠: SLDS アイコンを使用すると視覚的一貫性が保たれます。
動的アイコン: を使用変数/式（Formulas）を使用してデータに基づきアイコンを変更します。
アイコンの利用可能性: 有効なアイコン名についてはドキュメントを確認してください

最終更新 6 か月前

役に立ちましたか？