List Divider

The list divider component creates a list separator, which can be used for grouping list items.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Options

Default Selectors

By default, all elements with the data-role="listdivider" or class="ui-listdivider" attribute are displayed as list dividers.

<ul data-role="listview">
   <li data-role="list-divider">Item styles</li>
   <li><a href="#">Normal lists</a></li>
   <li><a href="#">Normal lists</a></li>
   <li><a href="#">Normal lists</a></li>
</ul>

Manual Constructor

To manually create a list divider component, use the component constructor from the tau namespace:

<ul data-role="listview">
   <li>Item</li>
   <li id="listdivider">Divider</li>
   <li>Item</li>
   <li>Item</li>
</ul>
<script>
   var listdivider = tau.widget.ListDivider(document.getElementById("listdivider"));
</script>

If the jQuery library is loaded, you can use its method:

<ul data-role="listview">
   <li>Item</li>
   <li id="listdivider">Divider</li>
   <li>Item</li>
   <li>Item</li>
</ul>
<script>
   $("#listdivider").listdivider();
</script>

HTML Examples

Options

The following table lists the options for the list divider component.

Option Input type Default value Description
data-folded boolean false Sets whether to show the divider press effect.
data-line boolean true Sets whether to show the divider line.
data-style "normal" | "checkbox" | "dialogue" "normal" Style of the list divider.