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页面中导入设计系统样式
结果预览: