tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning Design System v2.2.1の便利コンポーネント

SalesforceのCSSフレームワークLightning Design Systemがv2.2.1まで公開されていました。久しぶりに覗いてみたのですが便利なコンポーネントがいろいろ追加されているみたいです。
f:id:tyoshikawa1106:20170216010536p:plain

Lightning Design System

App Launcher (PROTOTYPE)

LEXのAppLauncherを再現するCSSコンポーネントです。
f:id:tyoshikawa1106:20170216010751p:plain

Files

ファイルアップロード用のCSSコンポーネントです。
f:id:tyoshikawa1106:20170216011210p:plain
f:id:tyoshikawa1106:20170216011238p:plain

Global Header

Lightning Experienceで使われているグローバルヘッダーです。検索ボックスもついています。
f:id:tyoshikawa1106:20170216011712p:plain

Global Navigation

Lightning Experienceで使われているグローバルナビゲーションです。
f:id:tyoshikawa1106:20170216012116p:plain

Progress Indicator

プログレスバー
f:id:tyoshikawa1106:20170216012622p:plain

Rich Text Editor

リッチテキストエディタ
f:id:tyoshikawa1106:20170216012724p:plain

Walkthrough

f:id:tyoshikawa1106:20170216012839p:plain
f:id:tyoshikawa1106:20170216012937p:plain


v2.2.1の時点ではこんなコンポーネントも利用できるようになっていました。グローバルヘッダーがあればHerokuなどで作成したアプリをSalesforceっぽいデザインにすることができると思います。加工が難しいinput type="file"用のCSSコンポーネントもすごく便利そうでした。