YouTube ChannelSchedule a CallSubscribe for Updates

アイコンピッカー

アイコンピッカーコンポーネントは、事前定義されたリストからアイコンを選択できるようにします。

概要

アイコンピッカーは、アイコンを選択するためのユーザーフレンドリーなインターフェースを提供します。例えば（のような）アイコン名を入力する代わりに、 utility:add）、ユーザーはカテゴリ分けされた一覧から視覚的に閲覧して選択できます。コンポーネントはその後、 選択されたアイコン名 を値として保持し、他のコンポーネント（ボタンの iconName プロパティなど）や数式で使用できます。

アイコンピッカーの設定

キャンバス上でアイコンピッカーコンポーネントを選択し、プロパティパネルでそのプロパティにアクセスします。

基本プロパティ

これらのプロパティは、アイコンピッカーの基本的なデータとラベリングを制御します。

  • API 名： （テキスト）このコンポーネントインスタンスの 一意の 識別子（例： StatusIconPicker).

  • ラベル： （テキスト）アイコンピッカーの入力フィールドの上または横に表示されるテキストラベル。例：「アイコンを選択:」「ステータスアイコンを選択:」。

  • 値： （テキスト - 極めて重要）このプロパティには、現在選択されているアイコンの 名前 が保持されます（例： utility:add, standard:account).

    • データバインディング： あなたは バインド する必要があります。このプロパティを AccountId equals {!inputAccountId} 変数リソースに。この変数が選択されたアイコン名を保持します。その後、この変数を使用して アイコン名 プロパティを設定できます（ 他の コンポーネント（ボタン、メトリクスなど））。

  • フィールドレベルヘルプ： （テキスト、任意）ラベルの横に表示されるヘルプテキスト。

  • プレースホルダー： （テキスト）アイコンピッカーの入力フィールドに表示されるプレースホルダーテキスト 前に ユーザーが選択を行うまで。例：「アイコンを検索...」

外観プロパティ

これらのプロパティは、 アイコンピッカー自体 の視覚的な表示（内部のアイコンではない）を制御します。

  • バリアント： （テキスト - オプションから選択） ラベル:

    • standardの視覚スタイルと位置を制御：入力フィールドの上にラベル。

    • label-inline：入力フィールドの左側にラベル。

    • label-stacked：入力フィールドの上にラベル（ standard).

    • label-hiddenとは異なるスタイルの場合があります）。：ラベルを非表示。

  • メニューラベル： （テキスト）表示されるメニューのラベルをカスタマイズします。

  • メニューアイコンサイズ： （テキスト - オプションから選択）アイコンのサイズを制御 （ドロップダウンメニュー内）: x-small, small, medium, large, x-large.

  • メニューバリアント：（テキスト - オプションから選択）メニューの視覚スタイルを制御します。

動作プロパティ

これらのプロパティは、ユーザーがアイコンピッカーとどのように対話するかを制御します。

  • フッターを非表示： （ブール値 - チェックボックス）有効にすると、ドロップダウンメニューの「キャンセル」と「完了」ボタンを非表示にします。非表示の場合、アイコンをクリックした時点で即座に選択が確定します。

  • 入力テキストを非表示： （ブール値 - チェックボックス）有効にすると、（ユーザーが検索を入力できる）テキスト入力フィールドが非表示になります。アイコンピッカーは、アイコン選択メニューを開くボタンとして表示されます。検索ではなく閲覧を強制したい場合に使用します。

  • 無効： （ブール値 - チェックボックス）アイコンピッカーを完全に無効化します。

  • 読み取り専用： （ブール値 - チェックボックス）ユーザーが 表示 はできるが、変更はできないようにします。

  • 必須： （ブール値 - チェックボックス）アイコンの選択を必須にします。

  • 表示： （ブール値）ページ上でアイコンピッカーコンポーネントを表示するかどうかを制御します。

フィルタリングオプション（詳細）

  • 非表示カテゴリ： （テキスト - カンマ区切り）特定のカテゴリを非表示

例：ヘッダーのアイコンを動的に設定

この例では、アイコンピッカーを使用して、Avonni ヘッダーコンポーネントに表示されるアイコンをユーザーが動的に変更する方法を示します。

  1. アイコンピッカーコンポーネントを追加

    1. API 名： MyIconPicker

    2. ラベル： 「ボタンアイコンを選択:」

    3. 値： これを次にバインド {!selectedIcon}.

  2. ヘッダーコンポーネントを追加

    1. アイコン名の値を、アイコンピッカー要素 > value から来る値にマッピングします。

最終結果
データバインディングの手順

重要な考慮事項

  • データバインディング： 値 プロパティが鍵です。選択されたアイコン名を保存するために変数にバインドします。

  • アイコンライブラリ：利用可能なアイコンライブラリ（SLDS、Avonni カスタムアイコン）を把握してください。アイコンピッカーは Avonni パッケージに含まれるアイコンのみを表示します。

  • アクセシビリティ：説明的な ラベル を提供し、ユーザーを案内するために フィールドレベルのヘルプ の使用を検討してください。

  • 動的更新： 値 プロパティを 数式 やその他のインタラクションと組み合わせて使用し、選択されたアイコンに基づく動的な挙動を作成します。

アイコンピッカーはアイコンを選択するためのユーザーフレンドリーな方法です。コンポーネントは SLDS アイコンをサポートします。

最終更新

役に立ちましたか？