Onsen UI es un marco HTML5 que le permite diseñar interfaces de usuario distintivas y utilizables de forma gratuita (UI). También facilita la creación de la interfaz de usuario, lo que permite a los programadores centrarse en el núcleo del producto. Onsen UI es un conjunto complejo de componentes de interfaz de usuario diseñados específicamente para aplicaciones móviles, con funciones listas para usar que siguen los estándares de diseño nativos de iOS y Android. La interfaz de usuario de Onsen se creó con AngularJS en mente, pero también se puede usar con jQuery o cualquier otro marco. La interfaz de usuario de Onsen es un marco JavaScript de PhoneGap y Cordova.
La Entrada de búsqueda se utiliza para crear un cuadro de búsqueda, que tiene la Entrada de búsqueda predeterminada o la Entrada de búsqueda de material.
Clases de componente CSS de entrada de búsqueda de interfaz de usuario de Onsen:
- entrada de búsqueda: esta clase se utiliza para crear una barra de búsqueda simple.
- search-input–material: esta clase se utiliza para crear una elegante barra de búsqueda con un efecto tridimensional.
Sintaxis:
<element-name class="Search-Input-Class">...</element-name>
Ejemplo 1: En el siguiente ejemplo, veremos cómo crear un cuadro de búsqueda simple.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI Search Input CSS Component </strong> <br> <input type="search" value="" placeholder="Search" class="search-input" style="width: 245px;"> </center> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, veremos cómo crear un cuadro de búsqueda con estilo.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI Search Input CSS Component </strong> <br> <input type="search" value="" placeholder="Search" class="search-input search-input--material" style="width: 255px;"> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#search-input-category
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA