3

Onsen UI CSS Component Material Search Input

 1 week ago
source link: https://www.geeksforgeeks.org/onsen-ui-css-component-material-search-input/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Onsen UI CSS Component Material Search Input

Last Updated : 01 Sep, 2022

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.

With the help of Onsen UI’s pre-built CSS components, creating adaptable and beautiful user interface layouts is a breeze. Onsen CSS components is a web-based topcoat theme roller for mobile developers that makes creating eye-catching UIs easier. Search Input is used to create a search box. Onsen UI CSS Component Material Search Input is used to create the Material Search Input box using the below class.

Onsen UI CSS Component Material Search Input Class:

  • search-input–material: This class is used to create the material search input.

Syntax:

<input type="search" value="" placeholder="..." 
       class="search-input search-input--material" 
       style="width: 280px;">

Example 1: The following example demonstrates the Onsen UI CSS Component Material Search Input.

<!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 Search Input
</h3>
<input type="search" value="" 
placeholder="Search" 
class="search-input 
search-input--material" 
style="width: 280px;">
</center>
</body>
</html>

Output:

Recording20220830at125907.gif

Example 2: The following example demonstrates the Onsen UI CSS Component Material Search Input.

<!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 Search Input
</h3>
<input type="search" value="" 
placeholder="Search here..." 
class="search-input 
search-input--material" 
style="width: 200px;">
<br> <br>
<input type="search" value="GeeksforGeeks" 
placeholder="Search here..." 
class="search-input 
search-input--material" 
style="width: 350px;">
</center>
</body>
</html>

Output:

Recording20220830at142037.gif

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

“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank

With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.

So get ready for salary hike only with our Full Stack Development Course.

Like Article
Suggest improvement
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK