Blaze UI es un marco CSS de código abierto. Es un kit de herramientas de interfaz de usuario liviano que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Los conjuntos de campos y leyendas de entrada de la interfaz de usuario de Blaze se utilizan para crear conjuntos de campos y leyendas de conjuntos de campos con algunas opciones. Usamos la clase fieldset para crear el fieldset y fieldset__legend para crear la leyenda. En este artículo, analizaremos los campos de entrada y las leyendas de la interfaz de usuario de Blaze.
Conjuntos de campos de entrada y clases de leyendas de Blaze UI:
- o-fieldset: esta clase se utiliza para crear el conjunto de campos.
- o-fieldset__legend: esta clase se utiliza para crear la leyenda del conjunto de campos.
Sintaxis:
<fieldset class="o-fieldset">
<legend class="o-fieldset__legend">
...
</legend>
...
</fieldset>
Ejemplo 1: el siguiente ejemplo muestra los campos de entrada y las leyendas de la interfaz de usuario de Blaze mediante entradas de radio .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Fieldsets and Legends </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Fieldsets and Legends </h3> <fieldset class="o-fieldset"> <legend class="o-fieldset__legend"> Choices: </legend> <label class="c-field c-field--choice"> <input type="radio" name="opt"> GFG option 1 </label> <label class="c-field c-field--choice"> <input type="radio" name="opt"> GFG option 2 </label> <label class="c-field c-field--choice"> <input type="radio" name="opt"> GFG option 3 </label> </fieldset> </div> </body> </html>
Producción:
Leyendas y conjuntos de campos de entrada de la interfaz de usuario de Blaze
Ejemplo 2: El siguiente ejemplo muestra los conjuntos de campos de entrada y las leyendas de la interfaz de usuario de Blaze mediante el uso de entradas de casilla de verificación .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Input Fieldsets and Legends </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Input Fieldsets and Legends </h3> <fieldset class="o-fieldset"> <legend class="o-fieldset__legend"> Choices: </legend> <label class="c-field c-field--choice"> <input type="checkbox" name="opt"> GeeksforGeeks 1 </label> <label class="c-field c-field--choice"> <input type="checkbox" name="opt"> GeeksforGeeks 2 </label> <label class="c-field c-field--choice"> <input type="checkbox" name="opt"> GeeksforGeeks 3 </label> <label class="c-field c-field--choice"> <input type="checkbox" name="opt"> GeeksforGeeks 4 </label> </fieldset> </div> </body> </html>
Producción:
Leyendas y conjuntos de campos 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 harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA