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.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Onsen UI CSS Component Noborder List
</h3>
<ul class="list list--noborder">
<li class="list-item">
<div class="list-item__center">
GFG item 1
</div>
</li>
<li class="list-item">
<div class="list-item__center">
GFG item 2
</div>
</li>
<li class="list-item">
<div class="list-item__center">
GFG item 3
</div>
</li>
</ul>
</center>
</body>
</html>
|
Output:
Example 2: The following example demonstrates the Onsen UI CSS Component Noborder List containing the logo image.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Onsen UI CSS Component Noborder List
</h3>
<ul class="list list--noborder">
<li class="list-item">
<div class="list-item__left">
<img class="list-item__thumbnail" src=
</div>
<div class="list-item__center">
<div class="list-item__title">
GeeksforGeeks website
</div>
<div class="list-item__subtitle">
A Computer Science portal for geeks.
</div>
</div>
</li>
<li class="list-item">
<div class="list-item__left">
<img class="list-item__thumbnail" src=
</div>
<div class="list-item__center">
<div class="list-item__title">
GFG
</div>
<div class="list-item__subtitle">
GeeksforGeeks
</div>
</div>
</li>
</ul>
</center>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#list-category