Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
El elemento de formulario Bulma textarea es la versión de varias líneas del elemento de entrada. Usaremos el elemento <textarea> con la clase textarea para crear el elemento textarea en Bulma.
Los estados de Bulma Textarea se utilizan para establecer los diferentes estados de los campos de Textarea. Hay muchos estados diferentes disponibles para los campos de Textarea que son: normal, desplazado, enfocado, cargando, deshabilitado, de solo lectura y de tamaño fijo. Puede establecer los estados del área de texto utilizando las clases proporcionadas por Bulma.
Bulma Textarea Estados Clases:
- área de texto: se utiliza para crear un campo de área de texto normal/predeterminado.
- is-hovered: se utiliza para crear un campo de área de texto flotante. Esta clase se usa con la clase textarea.
- is-focused: se utiliza para crear un campo textarea enfocado. Esta clase se usa con la clase textarea.
- is-loading: se utiliza para crear un campo de área de texto de carga. Esta clase se usa con el contenedor de clase de control.
- tiene-tamaño-fijo: Se utiliza para crear un campo de área de texto de tamaño fijo. Esta clase se usa con la clase textarea.
Nota: Podemos cambiar el tamaño de los francotiradores de carga agregando la clase is-small, is-medium o is-large con el contenedor de clase de control.
Sintaxis:
<textarea class="textarea is-focused"
placeholder="Focused textarea">
</textarea>
Estado deshabilitado: Usaremos el atributo HTML <textarea> disabled para deshabilitar el campo de área de texto.
Solo lectura: Usaremos el atributo de solo lectura HTML <textarea> para hacer que el campo de área de texto no sea editable.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Textarea States</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-1 has-text-success"> GeeksforGeeks </h1> <p class="is-size-3"> Bulma Textarea States </p> <div class="container"> <div class="control"> <textarea class="textarea" placeholder="Normal textarea field"> </textarea> <br><br> <textarea class="textarea is-hovered" placeholder="Hovered textarea field"> </textarea> <br><br> <textarea class="textarea is-focused" placeholder="Focused textarea field"> </textarea> <br><br> <textarea class="textarea" placeholder="Disabled textarea field" disabled></textarea> <br><br> <textarea class="textarea" placeholder="Readonly textarea field" readonly></textarea> <br><br> <textarea class="textarea has-fixed-size" placeholder="Fixed area textarea field"> </textarea> <br><br> </div> <div class="control is-loading"> <textarea class="textarea" placeholder="Loading textarea field"> </textarea> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/form/textarea/#states