SFDC：Lightning Design Systemのアセットを参照できる$Assetを試してみました

Lightning Design Systemのアセットを参照できる$Assetを試してみました。$AssetはSpring'17から利用できるグローバル変数です。apex:sldsタグと一緒に利用できます。

$Asset グローバル変数を使用した Lightning Design System アセットの参照

使い方はこんな感じです。

<apex:page>
    <apex:slds />
    <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
        <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="Contact Avatar" />
    </span>
</apex:page>

次のサンプルコードを用意してみました。

<apex:page docType="html-5.0" sidebar="false" tabStyle="Account">
    <apex:slds rendered="true" />
    <div class="slds">
        <div class="slds-box">
            <apex:form id="form">
                <apex:input type="text" styleClass="slds-input" html-placeholder="Account Name" />
                <div class="slds-m-top--small">
                    <apex:commandButton value="Go!" styleClass="slds-button slds-button--brand" />
                </div>
                <div class="slds-m-top--small">
                    <span class="slds-icon_container slds-icon--large slds-icon-standard-account" title="Contact Avatar">
                        <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="Contact Avatar" />
                    </span>
                </div>
            </apex:form>
        </div>
    </div>
</apex:page>

無事にアイコンを表示することができました。

assetsフォルダに簡単にアクセスできて便利そうです。