リストビューのテーマ設定
ボタン用の色見本は、リストにも適用されます。フレームワークはデフォルトで色見本 “c” (デフォルトのテーマでは「銀」)が適用され、分類タイトルには “b” (「青」)が使われます。
<ul data-role="listview" data-inset="true">
リストアイテムのテーマ
リストに data-theme 属性を設定することで、各リストアイテムにテーマのボタン用色見本を適用できます。
<ul data-role="listview" data-inset="true" data-theme="d">
リストアイテム(li)レベルでも data-theme 属性は適用できます。
分類のテーマ
リストの分類もテーマ設定できます。リスト要素に data-divider-theme で色見本を指定してください。
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
子要素数表示のテーマ
子要素数表示もテーマ設定できます。リスト要素に data-count-theme で色見本を指定してください。
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
アイコンのテーマ
リストリンクに付けられるアイコンは arrow-r です。これを変えるには data-icon 属性で ボタンのアイコン と同様にアイコン名を指定してください。アイコンを表示しないようにするには data-icon 属性に “false” を設定します。
<li data-icon="info"><a href="#">Notices</a></li>
<li data-icon="alert"><a href="#">Alerts</a></li>
<li data-icon="false"><a href="#">No icon</a></li>
分割ボタンのテーマ
分割ボタンで2つ目のボタンは、デフォルトで色見本 “b” が適用されます。
<ul data-role="listview" data-inset="true" data-split-theme="a">
右側のボタンにテーマ設定するには data-split-theme に色見本を指定します。各リストアイテム毎に data-theme を設定することも出来ます。
分割ボタンは data-split-icon で ボタンのアイコン のようなアイコン名を指定することで、設定できます。
スウォッチのサンプル
A swatch
B swatch
C swatch
D swatch
E swatch