Onsen UI CSS Component Basic List

Onsen UI is an innovative and practical HTML5 framework that is available free for use. It simplifies UI development so that app developers may focus on the functionality of the software. With a huge selection of premium UI elements made exclusively for mobile apps and packed with functions that follow native iOS and Android design standards, Onsen UI is an excellent resource. Onsen UI is made to function with AngularJS, however, it may also be used with jQuery or any other framework. The Onsen UI JavaScript framework was made using PhoneGap and Cordova.

Onsen UI provides the pre-built CSS components for fast designing versatile and appealing user interface layouts. Onsen CSS Components is a web-based Topcoat theme roller for mobile developers that makes creating beautiful UIs easier for developers.

The Basic List is a versatile and powerful component that may be used to display a succession of items. An unordered list with list items and the appropriate classes is the simplest basic list.

Onsen UI CSS Component Basic List Classes:

• list: This class is added to an unordered list element to make it a list component.
• list-item: This class is added to a list element to specify the list elements.
• list-item__center: This class is added to the list elements so it is centered vertically so that it has equal padding on top and bottom.

Syntax:

<ul class="list">
  <li class="list-item">
    <div class="list-item__center">. . .</div>
  </li>
</ul>

Example 1: The code below demonstrates the creation of a basic list using the above lists.

Output:

 

Example 2: The code below demonstrates the creation of a list with icons added to the list of items.

Output:

 

Reference: https://onsen.io/v2/api/css.html#list-category