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.
Los estados de entrada de Bulma se utilizan para establecer los diferentes estados de los campos de entrada. Hay muchos estados diferentes disponibles para los campos de entrada que son: normal, suspendido, enfocado, cargando, estático, deshabilitado y de solo lectura. Puede establecer los estados de entrada utilizando las clases proporcionadas por Bulma.
Clases de estados de entrada de Bulma:
- is-hovered: se utiliza para crear un campo de entrada flotante. Esta clase se utiliza con la clase de entrada.
- is-focused: se utiliza para crear un campo de entrada enfocado. Esta clase se utiliza con la clase de entrada.
- is-loading: se utiliza para crear un campo de entrada de carga. Esta clase se usa con el contenedor de clase de control.
- is-static: se utiliza para eliminar el fondo, el borde, la sombra y el relleno horizontal, manteniendo el espacio vertical para que pueda alinear fácilmente la entrada en cualquier contexto, como un formulario horizontal.
Nota: Podemos cambiar el tamaño de los francotiradores de carga agregando is-small, is-medium o is-large al contenedor de control.
Sintaxis:
<input class="input input States Class">
Estado deshabilitado: Usaremos el atributo HTML deshabilitado para deshabilitar el campo de entrada.
Entradas estáticas y de solo lectura: Usaremos el atributo de solo lectura HTML para hacer que el campo de entrada no sea editable.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Input 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 Input States</p> <div class="container"> <div class="control"> <input class="input" type="text" placeholder="Normal input field"> <br><br> <input class="input is-hovered" type="text" placeholder="Hovered input field"> <br><br> <input class="input is-focused" type="text" placeholder="Focused input field"> <br><br> <input class="input" type="text" placeholder="Disabled input field" disabled> <br><br> <input class="input is-static" type="text" value="Static input field" readonly> <br><br> </div> <div class="control is-loading"> <input class="input" type="text" placeholder="Loading input field"> </div> </div> </body> </html>
Producción:
Estados de entrada de Bulma
Referencia: https://bulma.io/documentation/form/input/#states