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.
Onsen UI CSS Component Underbar Text Input se utiliza para crear la entrada de texto con el subrayado. Para crear la entrada de texto UnderBar, usaremos la clase text-input-underbar .
Onsen UI CSS Componente Subbar Clase de entrada de texto:
- text-input–underbar: esta clase se utiliza para crear la entrada de texto de la barra inferior.
Sintaxis:
<div>
<input type="text"
class="text-input
text-input--underbar"
placeholder="..." value="">
</div>
Ejemplo 1: El siguiente ejemplo demuestra la entrada de texto debajo de la barra del componente CSS de la interfaz de usuario de Onsen.
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 CSS Component Underbar Text Input </h3> <div> <input type="text" class="text-input text-input--underbar" placeholder="Type.." value=""> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la entrada de texto de la barra inferior del componente CSS de la interfaz de usuario de Onsen al deshabilitar la entrada de texto de la barra inferior.
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 CSS Component Underbar Text Input </h3> <div> <input type="text" class="text-input text-input--underbar" placeholder="Type.." value=""> </div> <br> <div> <input type="text" class="text-input text-input--underbar" placeholder="This is disabled.." value="" disabled> </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 harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA