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 を作成する場合はサポートされません。
Visualforce ページに SLDS を含めるには、Visualforce コンポーネント <apex:slds> を HTML <head> タグに追加し、HTML クラス slds-scope を <body> タグに追加します。次の例では、SLDS 通知アイコンが表示されます。
1<apex:page showHeader="false" applyHtmlTag="true" applyBodyTag="false">
2 <head>
3 <apex:slds />
4 </head>
5 <body class="slds-scope" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
6 <!-- Your SLDS-styled content -->
7 <span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
8 <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
9 <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#announcement')}"></use>
10 </svg>
11 <span class="slds-assistive-text">Description of icon when needed</span>
12 </span>
13 </body>
14</apex:page>属性
| 属性名 | 属性型 | 説明 | 必須かどうか | API バージョン | アクセス |
|---|---|---|---|---|---|
| id | String | ページの他のコンポーネントが SLDS コンポーネントを参照できるようにする識別子。 | 14.0 | グローバル | |
| rendered | Boolean | コンポーネントをページに表示するかどうかを指定する boolean 値。指定されていない場合、この値はデフォルトの true に設定されます。 | 39.0 |