Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean 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 orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS ofrece Forms Radio Group que tiene pestañas como controles. Cuando se selecciona uno de los grupos de radio, tiene un borde azul que le da una importancia adicional.
Clases de Primer CSS Radio Group:
- grupo de radio: esta clase se utiliza para definir un elemento de grupo de radio padre. Todas las clases de elementos secundarios están cubiertas por esta clase.
- entrada de radio: esta clase se utiliza para definir el elemento de entrada del grupo de radio.
- radio-label: esta clase se utiliza para definir el elemento de etiqueta del grupo de radio.
Sintaxis:
<form>
<div class="radio-group">
<input class="radio-input" id="x" type="radio" name="options">
<label class="radio-label" for="x">
....
</label>
</div>
</form>
Ejemplo 1: El siguiente ejemplo demuestra el uso de Primer CSS Radio Group Forms.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Radio Group Forms </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="pl-12"> <h1 class="color-fg-success mb-2"> GeeksforGeeks </h1> <h3 class="mb-3"> Primer CSS Radio Group Forms </h3> <form> <div class="radio-group"> <input class="radio-input" id="gfg-a" type="radio" name="options"> <label class="radio-label" for="gfg-a"> Data Structure </label> <input class="radio-input" id="gfg-b" type="radio" name="options"> <label class="radio-label" for="gfg-b"> Competitive Programming </label> </div> </form> </div> </body> </html>
Producción:
Cartilla CSS Radio Group
Ejemplo 2: a continuación se muestra otro ejemplo que demuestra el uso de los formularios de grupo de radio CSS de Primer con iconos SVG .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Radio Group Forms </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="pl-12"> <h1 class="color-fg-success mb-2"> GeeksforGeeks </h1> <h3 class="mb-3"> Primer CSS Radio Group Forms </h3> <form> <div class="radio-group"> <input class="radio-input" id="gfg-a" type="radio" name="options"> <label class="radio-label" for="gfg-a"> <svg width="18" height="18" fill="currentColor" class="bi bi-laptop" viewBox="0 0 15 15"> <path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"/> </svg> Data Structure </label> <input class="radio-input" id="gfg-b" type="radio" name="options"> <label class="radio-label" for="gfg-b"> <svg width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16"> <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001zm-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z"/> </svg> Competitive Programming</label> </div> </form> </div> </body> </html>
Producción:
Cartilla CSS Radio Group
Referencia: https://primer.style/css/components/forms#radio-group
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA