Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio. En este artículo, aprenderemos cómo incluir la entrada de texto utilizando la interfaz de usuario de Onsen.
Entrada de texto proporciona un campo de entrada de tipo de texto donde el usuario puede proporcionar texto.
Clases de componentes CSS de entrada de texto de la interfaz de usuario de Onsen:
- Texto básico: este componente contiene la clase que se utiliza para crear una entrada de tipo texto.
- Entrada de texto de barra inferior: este componente contiene la clase que se utiliza para crear una entrada con el estilo de la barra inferior.
- Entrada de material : este componente contiene la clase que se utiliza para crear una entrada de texto simple.
Sintaxis:
<div class="Text Input Components Class">
...
</div>
Ejemplo 1: En este ejemplo, utilizaremos las clases anteriores para demostrar el uso de la entrada de texto.
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"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h2> Onsen UI Text Input CSS Components </h2> <div> <input type="text" class="text-input" placeholder="text" value=""> </div> </center> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, haremos uso de las clases anteriores para demostrar el uso de la entrada de texto.
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"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Onsen UI Text Input CSS Components </h3> <div> <input type="text" class="text-input text-input--underbar" placeholder="text" value=""> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#text-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