Onsen UI CSS Component Noborder List

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will see the CSS Component Noborder List using Onsen UI.

The Noborder List can be utilized to create the list without any border. To create the Noborder list, we will use the list–noborder modifier class.

Onsen UI CSS Component Noborder List Classes:

• list–noborder: This class is used to create the list without a border.
• list-item: This class is used to add the different items to the list.
• list-item__center: This class is used to center the list of items that it contains.

Syntax:

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

Example 1: The following example demonstrates the Onsen UI CSS Component Noborder List.

Output:

 

Example 2: The following example demonstrates the Onsen UI CSS Component Noborder List containing the logo image.

Output:

 

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