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 un área de texto utilizando la interfaz de usuario de Onsen.
Textarea es un área pequeña donde los usuarios pueden escribir lo que quieran, por ejemplo, un cuadro de comentarios donde los usuarios pueden escribir cualquier cosa relacionada con el tema.
Clases usadas:
- textarea: esta clase se utiliza para crear un área donde los usuarios pueden escribir sus puntos de vista.
- textarea–transparent: Esta clase se usa para crear un área transparente donde los usuarios pueden escribir lo que quieran.
Sintaxis:
<div class="textarea">
...
</div>
Ejemplo 1: en el siguiente ejemplo, aprenderemos cómo incluir un área de texto usando 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 Textarea CSS Components </h3> <br><br> <textarea class="textarea" rows="4" placeholder="Textarea"></textarea> </center> </body> </html>
Producción:
Ejemplo 2: en el siguiente ejemplo, aprenderemos cómo incluir el área de texto usando 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 Textarea CSS Components </h3> <br> <textarea class="textarea textarea--transparent" rows="3" placeholder="Textarea"></textarea> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#textarea-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