Visualforce ページでの Lightning Design System の使用

<apex:slds> 要素を使用して Visualforce ページに Lightning Design System を組み込み、Lightning Experience のスタイルに合わせます。このコンポーネントの使用は、Lightning Design System を静的リソースとしてアップロードして Visualforce ページで使用することに代わる合理的な方法です。

Lightning Design System は静的リソースとしてアップロードする必要がないため、ページの構文をシンプルに保ち、250 MB の静的リソース制限を超えずに済みます。Visualforce ページで Lightning Design System スタイルシートを使用するには、ページマークアップの任意の場所に <apex:slds /> を追加します。

一般に、Lightning Design System はすでに範囲が指定されています。ただし、applyBodyTag または applyHtmlTag を false に設定した場合、範囲指定クラス slds-scope を含める必要があります。範囲指定クラス内のマークアップで、Lightning Design System のスタイルとアセットを参照できます。

Lightning Design System のアセット (SVG アイコンや画像など) を参照するには、URLFOR() 数式関数と $Asset グローバル変数を使用します。