Primer CSS es un marco CSS gratuito de código abierto que se basa en el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de Github. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.
Uno de esos componentes en Primer CSS es Forms. En este artículo, aprenderemos sobre la casilla de verificación y las radios en los formularios CSS de Primer.
Casilla de verificación en Primer CSS: una casilla de verificación es otra forma de entrada en Primer CSS.
Casilla de verificación Clases utilizadas:
- .form-checkbox: esta clase se usa para agregar al contenedor que contiene la entrada de la casilla de verificación.
- .note: esta clase se agrega a un párrafo y lo alinea como una nota de ayuda para la entrada de la casilla de verificación.
- .highlight: esta clase se agrega para resaltar la casilla de verificación en color.
- .form-check-details-trigger: esta clase se agrega a la casilla de verificación particular, hace que active algunos otros detalles cuando se marca.
- .form-check-details: esta clase agregada a los elementos particulares hace que aparezca cuando se hace clic en la casilla de verificación con «.form-check-details-trigger».
Sintaxis básica de la casilla de verificación:
<form>
<div class="form-checkbox">
<label>
...
</label>
</div>
</form>
Radio en Primer CSS: Los botones de radio en Primer CSS son exactamente iguales a los botones de radio nativos de CSS. La única diferencia es que los botones de opción agregan un énfasis adicional al botón seleccionado al agregar un borde azul y otra característica de los botones de opción en Primer CSS es que podemos agregar una opción al botón de opción.
Clase:
.radio-group: Esta clase se agrega a los elementos que contienen el grupo de botones de opción.
Sintaxis básica de la radio:
<form>
<div class="radio-group">
...
</div>
</form>
Ejemplo 1: Hemos creado 3 casillas de verificación en los formularios. El primero tiene una declaración de apoyo, el segundo está resaltado y el tercero muestra algunos datos adicionales verificados.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <title>Document</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Primer CSS Checkbox</h2> <form> <div class="form-checkbox"> <label> <input type="checkbox" aria-describedby="help-text-for-checkbox"/> Student </label> <p class="note" id="help-text-for-checkbox"> Choose only if you are a <strong>student.</strong> </p> <label> <input type="checkbox"/> <em class="highlight">Available for hire</em> </label> <p>Are you studying in College?</p> <label aria-live="polite"> <input type="radio" class="form-checkbox-details-trigger" name="hireme"/> Yes <span class="form-checkbox-details text-normal"> <span class="d-block mb-1"> Name of the Course </span> <input type="text" name="" class="form-control input-contrast" size="3"/> </span> </label> </div> </form> </body> </html>
Producción:
Ejemplo 2: Hemos creado un formulario de entrada de grupos de radio de muestra.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <title>Document</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Primer CSS Checkbox</h2> <form> <label for="">Choose your Favourite Color:</label> <div class="radio-group" style="margin: 1em;"> <input class="radio-input" id="color1" type="radio" name="options"> <label class="radio-label" for="color1"> Red </label> <input class="radio-input" id="color2" type="radio" name="options"> <label class="radio-label" for="color2"> Blue </label> <input class="radio-input" id="color3" type="radio" name="options"> <label class="radio-label" for="color3"> Yellow </label> <input class="radio-input" id="color4" type="radio" name="options"> <label class="radio-label" for="color4"> Green </label> </div> <br> <label for="">Choose your favourite Programming Language:</label> <div class="radio-group" style="margin: 1em;"> <input class="radio-input" id="lang1" type="radio" name="options"> <label class="radio-label" for="lang1"> Java </label> <input class="radio-input" id="lang2" type="radio" name="options"> <label class="radio-label" for="lang2"> C++ </label> <input class="radio-input" id="lang3" type="radio" name="options"> <label class="radio-label" for="lang3"> Python </label> <input class="radio-input" id="lang4" type="radio" name="options"> <label class="radio-label" for="lang4"> C </label> </div> </form> </body> </html>
Producción:
Referencia: https://primer.style/css/components/forms#checkboxes-and-radios
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA