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

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

Use the Lightning Design System in Visualforce Pages

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

<apex:slds rendered="true" />

次のコードを用意して試してみました。

<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を適用することができました。

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

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

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

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

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