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

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 /> を追加します。

Visualforce ページで Lightning Design System スタイルシートを使用する手順は、次のとおりです。

ページマークアップの任意の場所に <apex:slds /> を追加します。
<apex:page> の applyBodyTag 属性または applyHtmlTag 属性を false に設定します。
任意の SLDS スタイルまたはアセット親要素についての slds-scope クラスを含めます。

Visualforce タグは、slds-scope 要素でラップしないでください。

警告

1<apex:page standardController="Account" applyBodyTag="false">
2    <apex:slds /> 
3 
4    <!-- any Visualforce component should be outside SLDS scoping element -->
5    <apex:outputField value="{!Account.OwnerId}" /> 
6 
7    <div class="slds-scope">
8    <!-- SLDS markup here -->
9    </div>
10</apex:page>

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

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

1<svg aria-hidden="true" class="slds-icon">
2    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
3</svg>

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 のカード要素および標準取引先コントローラを使用します。このページには、取引先の PNG アイコンも表示されます。

レコード ID を使用してデータを読み込まない限り、このページにデータはありません。Lightning Design System は、Visualforce ページにデータを取り込むコンポーネント (<apex:pageBlock>、<apex:detail> など) をサポートしません。Lightning Design System を使用してページから Salesforce データにアクセスするには、リモートオブジェクト、JavaScript Remoting、または REST API を代わりに使用してください。

1<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" standardController="Account" applyBodyTag="False" applyHtmlTag="False">
2<head>
3  <title>{! Account.Name }</title>
4  <apex:slds /> 
5</head>
6
7<body class="slds-scope">
8    <!-- MASTHEAD -->
9    <p class="slds-text-heading--label slds-m-bottom--small">
10      Using the Lightning Design System in Visualforce
11    </p>
12    <!-- / MASTHEAD -->
13        
14    <!-- PAGE HEADER -->
15    <p class="slds-text-title_caps slds-line-height--reset">Accounts</p>
16        <h1 class="slds-page-header__title slds-truncate" title="My Accounts">{! Account.Name }</h1>
17        <span class="slds-icon_container slds-icon-standard-account" title="Account Standard Icon">
18          <svg class="slds-icon slds-page-header__icon" aria-hidden="true">
19              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}" />
20          </svg>
21        </span>
22          <!-- / HEADING AREA -->
23      <div class="slds-col slds-no-flex slds-grid slds-align-top">
24        <button class="slds-button slds-button--neutral">New Account</button>
25      </div>
26    <!-- / PAGE HEADER -->
27
28    <!-- ACCOUNT DETAIL CARD -->
29    <div class="slds-panel slds-grid slds-grid--vertical slds-nowrap">
30      <div class="slds-form--stacked slds-grow slds-scrollable--y">
31
32        <div class="slds-panel__section">
33          <h3 class="slds-text-heading--small slds-m-bottom--medium">Account Detail</h3>
34          <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
35            <span class="slds-form-element__label">Name</span>
36            <div class="slds-form-element__control">
37              <span class="slds-form-element__static">{! Account.Name }</span>
38            </div>
39          </div>
40          <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
41            <span class="slds-form-element__label">Phone</span>
42            <div class="slds-form-element__control">
43              <span class="slds-form-element__static">{! Account.Phone }</span>
44            </div>
45          </div>
46        </div>
47        <div class="slds-panel__section slds-has-divider--bottom">
48          <div class="slds-media">
49            <div class="slds-media__body">
50              <div class="slds-button-group slds-m-top--small" role="group">
51                <button class="slds-button slds-button--neutral slds-grow">Edit</button>
52                <button class="slds-button slds-button--neutral slds-grow">Save</button>
53                 <button class="slds-button slds-button--neutral slds-grow">New Account</button>
54              </div>
55            </div>
56          </div>
57        </div>
58      </div>
59    </div>
60    <!-- / ACCOUNT DETAIL CARD -->
61</body>
62</apex:page>

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

Visualforce 開発者ガイド

Lightning Design System の使用

例