All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of "c" (silver in the default theme) and swatch "b" (blue in default theme) for dividers. Below is a default themed list.
<ul data-role="listview" data-inset="true">
Theming list items
The list item color scheme can be changed to any button color theme swatch by adding the data-theme attribute to the list, and setting the letter theme swatch. Here is the same list above with the "a" swatch applied.
<ul data-role="listview" data-inset="true" data-theme="d">
data-theme attributes also work at the LI-level, for styling a single item.
Theming dividers
The theme for list dividers can be set by adding the data-divider-theme to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
Theming count bubbles
The theme for count bubbles can be set by adding the data-count-theme to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
Theming icons
The default icon for each list item is arrow-r. To override this, set the data-icon attribute on the desired list item to the name of a standard icon. To prevent icons from appearing altogether, set the data-icon attribute to "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>
Theming split buttons
For split lists which a second button, the framework default to "b" for the theme swatch (blue in the default theme) Here is a default split list:
<ul data-role="listview" data-inset="true" data-split-theme="a">
To specify the color swatch for the icon button on the right, add the data-split-theme to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a data-theme attribute to specific links (see second list item).
The icon for the split theme can set at the list level by adding the data-split-icon to the list and specifying a standard icon. This attribute can also be added to individual split inside list items by adding a data-icon attribute to specific links (see second list item).
<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete">
Examples of all basic list swatches
A swatch
B swatch
C swatch
D swatch
E swatch
More in this section
- List views
- List basics & API
- Basic linked list
- Nested list
- Numbered list
- Split button list
- List dividers
- Count bubble
- Thumbnails
- Icons
- Content formatting
- Search filter bar
- Inset search filter bar
- Search filter bar with dividers
- Search filter hidden data
- Read-only lists
- Read-only inset lists
- Lists with forms
- Inset lists with forms
- Inset styled lists
- List performance test
- Theming lists