Onsen UI CSS Component Material List with Thumbnails
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. Thumbnails are reduced-size images that can be used with the list item. Onsen UI CSS Component Material List with Thumbnails is used to add a thumbnail along with the list item using the list-item–material__thumbnail class.
Onsen UI CSS Component Material List with Thumbnails Class:
- list-item–material__thumbnail: This class is used to create the material list item with a thumbnail.
Syntax:
<ul class="list list--material">
<li class="list-item list-item--material">
<div class="list-item__left
list-item--material__left">
<img class="list-item__thumbnail
list-item--material__thumbnail"
src="...." alt="...">
</div>
...
</li>
</ul>Example 1: The following example demonstrates the Onsen UI CSS Component Material List with Thumbnails.
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 Material List with Thumbnails </h3> <ul class="list list--material"> <li class="list-item list-item--material"> <div class="list-item__left list-item--material__left"> <img class="list-item__thumbnail list-item--material__thumbnail" src= </div> <div class="list-item__center list-item--material__center"> <div class="list-item__title list-item--material__title"> GFG </div> <div class="list-item__subtitle list-item--material__subtitle"> GeeksforGeeks </div> </div> </li> </ul> </center></body></html> |
Output:
Example 2: The following example demonstrates the Onsen UI CSS Component Material List with Thumbnails.
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 Material List with Thumbnails </h3> <ul class="list list--material"> <li class="list-item list-item--material"> <div class="list-item__left list-item--material__left"> <img class="list-item__thumbnail list-item--material__thumbnail" src= </div> <div class="list-item__center list-item--material__center"> <div class="list-item__title list-item--material__title"> GFG </div> <div class="list-item__subtitle list-item--material__subtitle"> GeeksforGeeks </div> </div> </li> <li class="list-item list-item--material"> <div class="list-item__left list-item--material__left"> <img class="list-item__thumbnail list-item--material__thumbnail" src= </div> <div class="list-item__center list-item--material__center"> <div class="list-item__title list-item--material__title"> GeeksforGeeks website </div> <div class="list-item__subtitle list-item--material__subtitle"> A Computer Science portal for geeks. </div> </div> </li> <li class="list-item list-item--material"> <div class="list-item__left list-item--material__left"> <img class="list-item__thumbnail list-item--material__thumbnail" src= </div> <div class="list-item__center list-item--material__center"> <div class="list-item__title list-item--material__title"> GeeksforGeeks image </div> <div class="list-item__subtitle list-item--material__subtitle"> portal for geeks </div> </div> </li> </ul> </center></body></html> |
Output:
Reference: https://onsen.io/v2/api/css.html#list-category
Please Login to comment...