この文章は 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 /> を追加します。

一般に、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 タグに追加できません。つまり、showHeader、standardStylesheets、および sidebar を false に設定していない場合、ページで SVG アイコンはサポートされません。

メモ

例

次のマークアップは、簡単な取引先詳細ページを表示します。このページでは、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    <div class="slds-page-header" role="banner">
16      <div class="slds-grid">
17        <div class="slds-col slds-has-flexi-truncate">
18          <!-- HEADING AREA -->
19            <p class="slds-text-title--caps slds-line-height--reset">Accounts</p>
20            <h1 class="slds-page-header__title slds-truncate" title="My Accounts">{! Account.Name }</h1>
21            <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Account Standard Icon">
22                <img src="{!URLFOR($Asset.SLDS, 'assets/icons/standard/account_60.png')}" alt="Account Standard Icon" />
23            </span>
24          <!-- / HEADING AREA -->
25        </div>
26      <div class="slds-col slds-no-flex slds-grid slds-align-top">
27        <button class="slds-button slds-button--neutral">New Account</button>
28        </div>
29      </div>
30    </div>
31    <!-- / PAGE HEADER -->
32
33    <!-- ACCOUNT DETAIL CARD -->
34    <div class="slds-panel slds-grid slds-grid--vertical slds-nowrap">
35      <div class="slds-form--stacked slds-grow slds-scrollable--y">
36
37        <div class="slds-panel__section">
38          <h3 class="slds-text-heading--small slds-m-bottom--medium">Account Detail</h3>
39          <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
40            <span class="slds-form-element__label">Name</span>
41            <div class="slds-form-element__control">
42              <span class="slds-form-element__static">{! Account.Name }</span>
43            </div>
44          </div>
45          <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
46            <span class="slds-form-element__label">Phone</span>
47            <div class="slds-form-element__control">
48              <span class="slds-form-element__static">{! Account.Phone }</span>
49            </div>
50          </div>
51        </div>
52        <div class="slds-panel__section slds-has-divider--bottom">
53          <div class="slds-media">
54            <div class="slds-media__body">
55              <div class="slds-button-group slds-m-top--small" role="group">
56                <button class="slds-button slds-button--neutral slds-grow">Edit</button>
57                <button class="slds-button slds-button--neutral slds-grow">Save</button>
58                 <button class="slds-button slds-button--neutral slds-grow">New Account</button>
59              </div>
60            </div>
61          </div>
62        </div>
63      </div>
64    </div>
65    <!-- / ACCOUNT DETAIL CARD -->
66</body>
67</apex:page>

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

Visualforce 開発者ガイド

Lightning Design System の使用

例