Onsen UI es un marco HTML5 práctico y de vanguardia que está disponible para su uso de forma gratuita. Simplifica el desarrollo de la interfaz de usuario para que los desarrolladores de aplicaciones puedan concentrarse en la funcionalidad del software. Debido a que proporciona una gran selección de elementos de interfaz de usuario premium diseñados especialmente para aplicaciones móviles y repletos de atributos que siguen los estándares de diseño nativos de iOS y Android, la interfaz de usuario de Onsen es un recurso excelente. La interfaz de usuario de Onsen está diseñada para funcionar con AngularJS, pero también se puede usar con jQuery o cualquier otro marco con facilidad. El marco JavaScript de la interfaz de usuario de Onsen se creó con PhoneGap y Cordova.
Los componentes CSS de la interfaz de usuario de Onsen , que son componentes CSS listos para usar, se pueden utilizar para construir rápidamente diseños de interfaz de usuario adaptables y atractivos. Las funciones visuales de los componentes CSS de la interfaz de usuario de Onsen se implementan mediante CSS (cssnext). Con la ayuda de Onsen CSS Components, un rodillo temático Topcoat basado en la web que es fácil de usar para los desarrolladores, crear interfaces de usuario estéticamente agradables es simple.
La entrada de texto básica de Onsen UI nos proporciona un campo de entrada de texto que podemos usar para tomar entrada de texto. Podemos agregar el atributo deshabilitado para deshabilitar el campo de entrada de texto que no está disponible para usar.
Onsen UI CSS Component Entrada de texto básica Clases utilizadas:
- entrada de texto: esta clase se usa con un elemento <input> para crear una entrada de texto básica.
- text-input–underbar: esta clase se usa para agregar la barra debajo del campo de entrada de texto.
Sintaxis:
<div>
<input type="text"
class="text-input text-input--underbar">
</div>
Ejemplo 1: El siguiente código demuestra cómo crear una entrada de texto 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 Text Input </h3> </div> <div style="margin:3rem;font-family:Roboto,sans-serif;"> <input type="text" class="text-input text-input--underbar" placeholder="text" value=""> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra cómo podemos agregar una entrada de texto básica dentro de otros componentes CSS como una tarjeta.
El componente de la tarjeta se utiliza en este ejemplo.
- tarjeta: esta clase se agrega al contenedor div que se definirá como la tarjeta.
- card–material: esta clase se agrega al contenedor div que se definirá como la tarjeta en estilo material.
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 Text Input </h3> </div> <div style="height:20px; padding:1px 0 0 0; margin:3rem;font-family:Roboto,sans-serif;"> <div class="card card--material"> <div class="card__content card--material__content"> <input type="text" class="text-input text-input--underbar" placeholder="text" value=""> </div> </div> </div> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#text-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