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

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning Design SystemのProgress Indicatorを試してみました

salesforce.com CSS Lightning

Lightning Design SystemのProgress Indicatorを試してみました。普段画像などを用意して実装するプログレスバーをCSSとSVGで表現することができます。
f:id:tyoshikawa1106:20170226220955p:plain


バージョン2.1では正しく動作しなかったので現時点で最新の2.2.1で試してみました。
f:id:tyoshikawa1106:20170226212341p:plain

実装時の注意点

Lightning Design SystemのサイトにあるサンプルコードをVisualforceページで動かすと一つ目のマーカーの左側にスペースができてしまいます。
f:id:tyoshikawa1106:20170226213437p:plain


これはCSSでマージンを変更することで解決します。
f:id:tyoshikawa1106:20170226213631p:plain

f:id:tyoshikawa1106:20170226213818p:plain:w300

ol li {
    margin-left: 0;
}

※実際には他のCSSに干渉しないようにクラスやID指定を組み合わせます。


Progress Indicatorで各マーカーの下にラベルを表示したいときがあると思います。その場合はslds-is-relativeをつかって対応可能です。
f:id:tyoshikawa1106:20170226215216p:plain

f:id:tyoshikawa1106:20170226215340p:plain



モバイルレイアウトでも対応してくれる便利なCSSコンポーネントでした。

デモ動画

サンプルコード