List View

The list view component is used to display, for example, navigation data, results, and data entries, in a list format.

Note

If you implement the list view component differently from what is described in the following examples, you must customize the element positioning for your application.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Group Index in Listview

Default Selectors

By default, all <ol> and <ul> elements with the class="ui-listview" and data-role="listview" attribute are displayed as list views.

Manual Constructor

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

HTML code:

<ul id="list">
   <li>Anton</li>
   <li>Arabella</li>
   <li>Barry</li>
   <li>Bill</li>
</ul>

JS code:

var listviewEl = document.getElementById("list"),
    listview = tau.widget.Listview(listviewEl);

HTML Examples

  • To create a list items without an anchor, use class="ui-li-static":

    <ul class="ui-listview">
   <li class="ui-li-static">list item1</li>
   <li class="ui-li-static">list item2</li>
   <li class="ui-li-static">list item3</li>
   <li class="ui-li-static">list item4</li>
</ul>

  • To create a list items with an anchor, use class="ui-li-anchor":

    <ul class="ui-listview">
   <li class="ui-li-anchor"><a href="page1.html">Page1</a></li>
   <li class="ui-li-anchor"><a href="page2.html">Page2</a></li>
   <li class="ui-li-anchor"><a href="page3.html">Page3</a></li>
   <li class="ui-li-anchor"><a href="page4.html">Page4</a></li>
</ul>

Group Index in Listview

To add Group Index (it was ListDivider in tizen2.3 TAU), just add a class="ui-group-index".

<ul class="ui-listview">
   <li class="ui-group-index">group 1</li>
   <li class="ui-li-static">list item1</li>
   <li class="ui-li-static">list item2</li>
   <li class="ui-group-index">group 2</li>
   <li class="ui-li-static">list item1</li>
   <li class="ui-li-static">list item2</li>
</ul>