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

apex:slds

Visualforce ページで Lightning Design System スタイル設定を参照できるようにします。このコンポーネントは、Lightning Design System を静的リソースとしてアップロードする代わりに使用します。

Visualforce ページで Lightning Design System スタイルシートを使用するには、そのページに <apex:slds /> を含めます。

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

Lightning Design System のアセット (SVG アイコンや他の画像など) を参照するには、URLFOR() 数式関数と $Asset グローバル変数を使用します。SVG アイコンを使用するには、xmlns="http://www.w3.org/2000/svg" と xmlns:xlink="http://www.w3.org/1999/xlink" を html タグ内で使用して、必要な XML 名前空間を追加します。

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

Lightning Design System のスタイル設定の例については、Lightning Design System に関するリファレンスサイトを参照してください。

次の例は、Lightning Design System を実装する Visualforce ページのスケルトンを示します。

1<apex:page>
2
3<apex:slds />
4<!-- Your SLDS-styled content -->
5
6</apex:page>

1<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">
2
3<head>
4  <apex:slds /> 
5</head>
6
7<body class="slds-scope">
8  <!-- Your SLDS-styled content -->
9</body>
10
11</apex:page>

認証

属性名	属性型	説明	必須	API バージョン	アクセス
`id`	String	ページの他のコンポーネントが SLDS コンポーネントを参照できるようにする識別子。		14.0	グローバル
`rendered`	Boolean	コンポーネントをページに表示するかどうかを指定する boolean 値。指定されていない場合、この値はデフォルトの true に設定されます。		39.0

Visualforce 開発者ガイド

apex:slds

次の例は、Lightning Design System を実装する Visualforce ページのスケルトンを示します。

認証