Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
Los colores de entrada de la interfaz de usuario de Blaze se utilizan para crear los campos de entrada con diferentes colores. Tenemos dos clases de color y un atributo como se muestra a continuación.
Clases y atributos de los colores de entrada de la interfaz de usuario de Blaze:
- c-field–success: esta clase se utiliza para crear el campo de entrada de color de éxito.
- c-field-error: esta clase se utiliza para crear el campo de entrada de color de error.
- disabled: este atributo se utiliza para crear el campo de entrada deshabilitado.
Sintaxis:
<input class="c-field Input-Colors-Class"
placeholder="..." type="text">
Ejemplo 1: el siguiente código muestra los colores de entrada de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Colors </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-window-box-large"> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Colors </h3> <input class="c-field c-field--success" placeholder="GeeksforGeeks success color" type="text"> <br> <input class="c-field c-field--error" placeholder="GeeksforGeeks error color" type="text"> </div> </body> </html>
Producción:
Colores de entrada de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente código muestra los colores de entrada de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Colors </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-window-box-large"> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Colors </h3> <input class="c-field c-field--success" placeholder="GeeksforGeeks success color disabled" disabled type="text"> <br> <input class="c-field c-field--error" placeholder="GeeksforGeeks error color disabled" disabled type="text"> </div> </body> </html>
Producción:
Colores de entrada de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/inputs/
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA