AX - アイコン

概要

AX - アイコン Experience Sites ページ上で、Salesforce Lightning Design System のアイコンライブラリからアイコンを表示する Experience Cloud コンポーネントです。

ポータル全体で、アクション、ステータス、カテゴリ、またはナビゲーション要素の視覚的な指標を追加するために使用します。Experience Builder でアイコン、サイズ、色、スタイルを設定して、ポータルのデザインに合わせます。

ステータス表示、アクションボタン、セクション見出し、ナビゲーション要素、または見やすさと認識性を高めるためにポータルに視覚的なシンボルが必要なあらゆる場所に最適です。

設定

プロパティ

アイコン名 表示するアイコンを選択します — 関連付けられたコンテンツやアクションを明確に表し、それを補完するものを選んでください。 アイコンサイズ アイコンがはっきり見え、ページレイアウトに調和して組み込まれるようにサイズを設定します。

バリアント アイコンの文脈上の意味やアクションに合う、あらかじめ定義されたスタイルバリエーションを選択し、視覚的な伝達効果を高めます。

タイトル アイコンにカーソルを合わせたときに、ユーザーに追加の文脈や情報を提供するタイトルを定義します。

代替テキスト アイコンの意味やアクションを伝える説明文を提供し、アクセシビリティを確保し、SEO を向上させます。

水平配置 コンテナー内でのアイコンの水平方向の配置を決定し、最適な位置に配置しながら視覚的なバランスと流れを保ちます。

スタイリング

背景

名称	説明	使用例
背景色	アイコンの背景色を設定します。	アイコンが際立ち、ページデザイン内で視覚的に明確に区別される背景色を選択します。
前景色	アイコン自体の色を設定します。	背景に対してアイコンがはっきり見え、全体のデザインに調和する色を選択します。
前景色ユーティリティ	アイコンの前景色を変更するためにユーティリティクラスを適用します。	CSS ユーティリティクラスを利用して、あらかじめ定義された配色スタイルをアイコンに簡単に適用し、一貫性とデザインカスタマイズのしやすさを確保します。

枠線

名称	説明	使用例
境界線の角丸	アイコンの境界線の角丸を定義します。	border-radius を調整して角丸のアイコンを作成し、アイコンのスタイル表現を高めます。