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.
Las casillas de verificación y radios de entrada de la interfaz de usuario de Blaze se usan para crear radios y casillas de verificación dentro de las etiquetas mediante la clase c-field-choice . Podemos crear estas entradas cuando le pedimos al usuario que seleccione cualquier valor o múltiples valores.
Clase de radios y casillas de verificación de entrada de Blaze UI:
- c-field–choice: esta clase se usa para crear la casilla de verificación y las entradas de radio.
Sintaxis:
<label class="c-field c-field--choice"> <input type="checkbox || radio"> ... </label>
Ejemplo 1: el siguiente código muestra las casillas de verificación y las radios de entrada de la interfaz de usuario de Blaze mediante casillas de verificación.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Checkboxes and Radios </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-window-box-large"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Checkboxes and Radios </h3> <label class="c-field c-field--choice"> <input type="checkbox"> Java </label> <br> <label class="c-field c-field--choice"> <input type="checkbox"> C++ </label> <br> <label class="c-field c-field--choice"> <input type="checkbox"> Python </label> </body> </html>
Producción:
Radios y casillas de verificación de entrada de Blaze UI
Ejemplo 2: el siguiente código muestra las casillas de verificación de entrada de la interfaz de usuario de Blaze y las radios usando radios.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Checkboxes and Radios </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-window-box-large"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Checkboxes and Radios </h3> <label class="c-field c-field--choice"> <input type="radio" name="gen"> Male </label> <label class="c-field c-field--choice"> <input type="radio" name="gen"> Female </label> </body> </html>
Producción:
Radios y casillas de verificación de entrada de Blaze UI
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