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

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:モバイルデザインテンプレートをつかってできること -Part2-

モバイルデザインテンプレートを使うことでできることを調べてみました。今回はリストビュー表示したいときに使えるCSSについてです。

リストビュー(Standard)のCSS

list-view

ulタグとliタグに対してリストビュー用のデザインを適用することができます。

f:id:tyoshikawa1106:20140201130406p:plain

f:id:tyoshikawa1106:20140201130439p:plain

right-one-icons

アイコンを表示するために右側にpadding-rightを指定してくれるみたいです。
複数アイコンを表示したいときは「right-two-icons」と「right-three-icons」まで用意されています。

f:id:tyoshikawa1106:20140201131112p:plain

h1タグとpタグ

list-view内ではh1タグとpタグはタイトルと補足のような感じで使用されます。
h1タグだけでなくh2以降も使用できるみたいです。

f:id:tyoshikawa1106:20140201132109p:plain

f:id:tyoshikawa1106:20140201132136p:plain

list-view-icons

リストビュー内でアイコンを表示したいときに指定します。

icon-right-arrow

f:id:tyoshikawa1106:20140201132934p:plain

f:id:tyoshikawa1106:20140201133004p:plain

icon-plus

f:id:tyoshikawa1106:20140201133125p:plain

f:id:tyoshikawa1106:20140201133151p:plain

icon-minus

f:id:tyoshikawa1106:20140201133340p:plain

f:id:tyoshikawa1106:20140201133357p:plain

リストビュー(Tabbed)のCSS

リストビューでタブ機能を使用するときに使えるCSSです。

tabbed-list-view-nav

タブナビゲーションを表示できます。

f:id:tyoshikawa1106:20140201134148p:plain

f:id:tyoshikawa1106:20140201134225p:plain

タブ使用には以下のルールがあるそうです。

タブの上限は 4 つです。タブを 2 つ表示する場合は span-50、3 つの場合は span-33、4 つの場合は span-25 を使用します。

tabbed-list-view

タブ毎のコンテンツを表示できます。

f:id:tyoshikawa1106:20140201155903p:plain


Tabのサンプル


リストビューのStandardとTabbedはこんな感じです。Tabbedの方がブラウザでは問題なく動くのですが、タブレット端末だと表示が少しうまくいきませんでした。他にも指定が必要な要素があるみたいです。