【Salesforce】VisualforceでLightning Design Systemを使用する

【Salesforce】VisualforceでLightning Design Systemを使用する

以前にも記述したように、SalesforceでLightning対応が増えています。

カスタム画面の開発もあるため、少しずつLightning Componentの作成について調べています。

VisualforceでLightning Design Systemを使用すればLightning Componentと似たレイアウトを作成することが出来ます。

Lightning Componentでも使われているCSSなので、覚えなければいけませんね。

https://www.lightningdesignsystem.com/

使用する準備はとても簡単です。

https://developer.salesforce.com/docs/atlas.ja-jp.214.0.pages.meta/pages/pages_compref_slds.htm

Visualforceのソース中にタグを追加するだけですね。

<apex:page>

<!-- これを追加 -->
<apex:slds />

</apex:page>

上のURLにもありますが、PDFで出力する場合は適用されないそうです。

zipで落としてCSSを読み込めば出来るのかもしれませんが、かなり面倒くさそうです。

まぁ、PDFでLightningっぽい見た目を適用することは少ないと思いますが。

最初のURLのガイドラインを確認すると分かりますが、かなりの数があります。

どれを使えば良いのか全然分からないため、地道に試したりしています。

グリッドとかは使いやすかったのですが、Lightning Componentであれば専用のタグで解決できてしまいます。

Lightning Componentのライブラリと一緒に眺めていると死にそうになります。

少しずつ覚えなければ、ですね。