tyoshikawa1106のブログ

- Force.com Developer Blog -

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

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

f:id:tyoshikawa1106:20170213071600p:plain

$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>

無事にアイコンを表示することができました。
f:id:tyoshikawa1106:20170213071756p:plain


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

追記

この機能についてちょっと教えてもらいました。SVGが表示できないバグがあるみたいです。ただこのバグは修正対応が始まっていて近いうちに直るとのことです。
http://salesforce.stackexchange.com/questions/159406/visualforce-asset-violating-cors