Onsen UI es un marco HTML5 innovador y útil que es de uso gratuito. Agiliza el desarrollo de la interfaz de usuario para que los desarrolladores de aplicaciones puedan concentrarse en la funcionalidad del software. La interfaz de usuario de Onsen es un recurso fantástico con una amplia variedad de elementos de interfaz de usuario premium creados especialmente para aplicaciones móviles y repletos de funciones que se adhieren a los estándares de diseño nativos de iOS y Android. Aunque también se puede usar con jQuery o cualquier otro marco, la interfaz de usuario de Onsen está diseñada para funcionar con AngularJS. Utilizando PhoneGap y Cordova, se desarrolló el marco JavaScript de la interfaz de usuario de Onsen.
Con la ayuda de los componentes CSS preconstruidos de Onsen UI , crear diseños de interfaz de usuario hermosos y adaptables es pan comido. Los componentes de CSS de Onsen son un rodillo temático de capa superior basado en la web para desarrolladores móviles que facilita la creación de interfaces de usuario llamativas. Una entrada de búsqueda básica es realmente un componente CSS muy útil que se puede usar para tomar entradas y principalmente se puede usar como una barra de búsqueda.
Onsen UI CSS Component Clases de entrada de búsqueda básica:
- entrada de búsqueda: esta clase se usa con un elemento <input> para hacer una entrada de búsqueda básica.
Sintaxis:
<input type="search" value="" placeholder=".."
class="search-input" style="width: ..;">
Ejemplo 1: El siguiente código demuestra cómo crear una entrada de búsqueda básica.
HTML
<!DOCTYPE html> <html> <head> <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> <div style="margin:3rem;font-family:Roboto, sans-serif;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3 style="margin-top:1rem;"> Onsen UI CSS Component Basic Search Input </h3> </div> <div style="margin:3rem;font-family:Roboto,sans-serif;"> <input type="search" value="" placeholder="Search" class="search-input" style="width:280px;"> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra cómo podemos agregar una entrada de búsqueda básica dentro de otros componentes CSS como una tarjeta.
HTML
<!DOCTYPE html> <html> <head> <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> <div style="margin:3rem; font-family:Roboto, sans-serif;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3 style="margin-top:1rem;"> Onsen UI CSS Component Basic Search Input </h3> </div> <div style="height:20px; padding:1px 0 0 0;"> <div class="card card--material"> <div class="card__content card--material__content"> <input type="search" value="" placeholder="Search" class="search-input" style="width:280px;"> </div> </div> </div> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#search-input-category
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA