この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

$Asset

Lightning Design System に含まれる画像およびその他のアセットを参照するときに使用するグローバル差し込み項目。

使用方法

<apex:slds> を使用する Visualforce ページでは、$Asset.SLDS を使用して、Lightning Design System に含まれる画像、アイコン、アバターを使用できます。URLFOR() 数式関数を使用してアセットを参照するには、ドット表記の $Asset を使用します。

SVG アイコンを使用するには、xmlns="http://www.w3.org/2000/svg" と xmlns:xlink="http://www.w3.org/1999/xlink" を html タグ内で使用して、必要な XML 名前空間を追加します。

現在、Salesforce のサイドバー、ヘッダー、または組み込みのスタイルシートを使用している場合、属性を html に追加できません。SVG アイコンは、showHeader、standardStylesheets、および sidebar が false に設定されている場合のみサポートされます。

メモ

例

次のマークアップは Lightning Design System のアバターを参照します。

1<apex:page>
2    <apex:slds />
3    <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
4        <img src="{!URLFOR($Asset.SLDS, 'assets/images/profile_avatar_96.png')}" alt="Contact Avatar" />
5    </span>
6</apex:page>

次のマークアップは、Lightning Design System の SVG 取引先アイコンを参照します。

1<apex:page>
2    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
3        <apex:slds />
4        <span class="slds-icon_container slds-icon-standard-account">
5            <svg aria-hidden="true" class="slds-icon">
6                <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
7            </svg>
8             <span class="slds-assistive-text">Account Icon</span>
9        </span>
10    </html>
11</apex:page>

Visualforce 開発者ガイド

$Asset

使用方法

例

関連項目: