In this article, we will learn how to include lists using Onsen UI. 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.
Lists are used to store data or information on web pages in ordered or unordered form.
Syntax:
<element-name class="class-name">...</element-name>
Classes Used:
- list: This class is used for a simple list.
- list-item: This class is used to create an item on a list.
- list-item__center: This class is used to create the list at the center.
- list-item–expandable: This class is used to create an expandable list.
- list-item__top: This class is used to create the list at the top.
- list-item__right: This class is used to create the list in the right position.
- list-item__left: This class is used to create the list in the left position.
- list-item__expand-chevron: This class is used to create an expandable chevron list.
- list-item__expandable-content: This class is used to create an expandable content list.
- list list–noborder: This class is used to create a list with no borders.
- list-header: This class is used to create a list header.
- list-item–tappable: This class is used to create the tappable list
- list–inset: This class is used to create the list of inset.
- list–inset__item: This class is used to create the inset item.
- list-item__thumbnail: This class is used to create the list of thumbnails.
- list-item–material: This class is used to create the material list.
- list-item–material__center: This class is used to create the material list at the center position.
- list-item–material__left: This class is used to create the material list at the left position.
- list-item–material__right: This class is used to create the material list at the right position.
- list-item–chevron: This class is used to create the list of chevrons.
- list-item__label: This class is used to create the list label.
- list-item–nodivider: This class is used to create the list with no divider.
- list-item–nodivider__center: This class is used to create the no divider list at the center position.
- list-item–nodivider__left: This class is used to create the no divider list at the left position.
- list-item–nodivider__right: This class is used to create the no divider list at the right position.
- list-item–longdivider: This class is used to create the list with a long divider.
- list-item–longdivider__center: This class is used to create the long divider list at the center position.
- list-item–longdivider__right: This class is used to create the long divider list at the right position.
- list-item–longdivider__left: This class is used to create the long divider list at the left position.
- list-title: This class is used to create the list title.
- list-title–material: This class is used to create the material title list.
Example 1: In the below example, we will create a simple list.
HTML
<!DOCTYPE html> <html>
<head>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Onsen UI CSS Component </h3>
<ul class="list">
<li class="list-item">
<div class="list-item__center">DSA</div>
</li>
<li class="list-item">
<div class="list-item__center">Java</div>
</li>
<li class="list-item">
<div class="list-item__center">C++</div>
</li>
</ul>
</center>
</body>
</html>
|
Output:
Example 2: In the below example, we will make use of the above classes to demonstrate the use to create a list.
HTML
<!DOCTYPE html> <html>
<head>
<!-- CDN links of Onsen UI library -->
<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
</h3> <br> <br>
<ul class="list">
<li class="list-header">
Header
</li>
<li class="list-item">
<div class="list-item__center">Item</div>
</li>
<li class="list-item">
<div class="list-item__center">Item</div>
</li>
<li class="list-item">
<div class="list-item__center">Item</div>
</li>
</ul>
</center>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#list-category