Visualforce 開発者ガイド
japex:slds
Visualforce ページで Lightning Design System スタイル設定を参照し、カスタムテーマを含むことができるようにします。このコンポーネントは、Lightning Design System を静的リソースとしてアップロードする代わりに使用します。
Visualforce ページで Lightning Design System スタイルシートを使用するには、そのページに <apex:slds /> を含めます。
一般に、Lightning Design System はすでに範囲が指定されています。showHeader="true" となっている Visualforce ページは、すでに範囲指定 CSS クラス slds-scope をページのコンテンツに適用しているため、コンテンツは Lightning Design System でスタイル設定されます。さらに、showHeader="false" かつ applyBodyTag="true" となっているページでは、範囲指定クラスがページの <body> 要素に追加されています。ただし、applyBodyTag または applyHtmlTag を false に設定した場合、範囲指定クラス slds-scope を含める必要があります。範囲指定クラス内のマークアップで、Lightning Design System のスタイルとアセットを参照できます。
Lightning Design System のアセット (SVG アイコンや他の画像など) を参照するには、URLFOR() 数式関数と $Asset.SLDS グローバル変数を使用します。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 アイコンはサポートされません。
注: <apex:slds> コンポーネントには、Visualforce ページからの PDF ファイルの作成時に既知の問題があります。このコンポーネントは、<apex:page renderAs="pdf"> を使用して、または PageReference.getContentAsPDF() をコールして PDF を作成する場合はサポートされません。
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 |