Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles. Cambiaren general da al usuario la opción de seleccionar una de las dos posibilidades presentes. Entonces, un interruptor básico es aquel en el que podemos activarlo o desactivarlo. En Foundation CSS, el cambio no es más que un marcado de casilla de verificación que usamos para crear este estilo. Radio Switch es similar a los botones de radio en HTML donde solo podemos seleccionar una opción entre las opciones dadas disponibles.
Clases de interruptores de radio Foundation CSS:
- switch: Esta clase se le da al elemento del cual se tiene que hacer el switch.
- switch-paddle: esta clase es responsable del estilo creado en la casilla de verificación original y también es responsable del fondo del cuadro alrededor del interruptor.
- radio: Este debería ser el tipo de entrada de la entrada del interruptor del elemento.
Sintaxis:
<div class="switch"> <input class="switch-input" id="xy" type="radio"> <label class="switch-paddle" for="xy"> <span class="show-for-sr">...</span> </label> </div>
Ejemplo 1: este es un ejemplo básico que ilustra el cambio de radio realizado con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Radio Switch</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Foundation CSS Radio Switch</strong> </center> <div style="margin: 5% 45%;"> <div class="switch"> <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup"> <label class="switch-paddle" for="exampleRadioSwitch1"> <span class="show-for-sr">Radio Switch</span> </label> </div> <div class="switch"> <input class="switch-input" id="exampleRadioSwitch2" type="radio" checked name="testGroup"> <label class="switch-paddle" for="exampleRadioSwitch2"> <span class="show-for-sr">Radio Switch</span> </label> </div> <div class="switch"> <input class="switch-input" id="exampleRadioSwitch3" type="radio" checked name="testGroup"> <label class="switch-paddle" for="exampleRadioSwitch3"> <span class="show-for-sr">Radio Switch</span> </label> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: Este es un ejemplo básico que ilustra diferentes tamaños de interruptores de radio creados con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Radio Switch</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Foundation CSS Radio Switch</strong> <p>Different Sizes for radio switch</p> </center> <div style="margin: 5% 45%;"> <span>Tiny switch</span> <div class="switch tiny"> <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup"> <label class="switch-paddle" for="exampleRadioSwitch1"> <span class="show-for-sr">Radio Switch</span> </label> </div> <span>Small switch</span> <div class="switch small"> <input class="switch-input" id="exampleRadioSwitch2" type="radio" checked name="testGroup"> <label class="switch-paddle" for="exampleRadioSwitch2"> <span class="show-for-sr">Radio Switch</span> </label> </div> <span>Medium switch</span> <div class="switch medium"> <input class="switch-input" id="exampleRadioSwitch3" type="radio" checked name="testGroup"> <label class="switch-paddle" for="exampleRadioSwitch3"> <span class="show-for-sr">Radio Switch</span> </label> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/switch.html