Visualforce-10.使用SLDS构建Visualforce App

代码示例：

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>Salesforce Lightning Design System Trailhead Module</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!-- Import the Design System style sheet -->
      <apex:slds />
    </head>
    <apex:remoteObjects >
    <apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
    </apex:remoteObjects>
    <body>
      <!-- REQUIRED SLDS WRAPPER -->
      <div class="slds-scope">
        <!-- MASTHEAD -->
        <p class="slds-text-heading_label slds-m-bottom_small"> Salesforce Lightning Design System Visualforce Workshop </p>
        <!-- / MASTHEAD -->
        <!-- PAGE HEADER -->
        <!-- / PAGE HEADER -->
        <!-- PRIMARY CONTENT WRAPPER -->
        <div class="myapp slds-p-horizontal_medium">
          <ul id="contact-list" class="slds-has-dividers_bottom-space"></ul>
        </div>
        <!-- / PRIMARY CONTENT WRAPPER -->
        <!-- FOOTER -->
        <!-- / FOOTER -->
      </div>
      <!-- / REQUIRED SLDS WRAPPER -->
      <!-- JAVASCRIPT -->
      <!-- / JAVASCRIPT -->
    </body>
  </html>
</apex:page>

代码解析：

  • 头部的<apex:slds />标记，在 Visualforce页面中导入设计系统样式

结果预览：

 

 

posted @ 2022-05-08 21:55  KousaiMiao  阅读(80)  评论(0)    收藏  举报