読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Spring'17プレリリース環境でapex:sldsタグを試してみました

salesforce.com Force.com

Spring'17でapex:sldsタグが追加されたそうなのでプレリリース環境で試してみました。

f:id:tyoshikawa1106:20170115105417p:plain

Use the Lightning Design System in Visualforce Pages


次のように宣言することでLightning Design SystemのCSSを適用してくれるタグです。静的リソースにアップロードする必要もなくなり便利そうです。

<apex:slds rendered="true" />


次のコードを用意して試してみました。
f:id:tyoshikawa1106:20170115105640p:plain

<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>
            </apex:form>
        </div>
    </div>
</apex:page>


無事にLightning Design SystemのCSSを適用することができました。
f:id:tyoshikawa1106:20170115105730p:plain


renderedオプションを保持しているので『rendered="false"』と宣言すればSLDSをOFFにできます。
f:id:tyoshikawa1106:20170115105854p:plain


SLDSのバージョンですが2.1.3(コメントには2.1.2)が適用されていました。
f:id:tyoshikawa1106:20170115110113p:plain


現在の最新は2.2.1なので一番最新バージョンが適用されるわけではないかもしれません。
f:id:tyoshikawa1106:20170115110205p:plain


あとはフォントの読み込みがうまくいっていなさそうでした。(Salesforce Classicで確認)
f:id:tyoshikawa1106:20170115110341p:plain


プレリリース版なので上記で確認したバージョンやフォントの読み込みは変更されるかもしれません。DE組織でちょっと動かしたいときにも便利そうなタグでした。