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.
Switch en general le 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 interruptor no es más que un marcado de casilla de verificación que usamos para crear este estilo.
Clases de cambio de CSS de la Fundación:
- switch: Esta clase se le da al elemento del cual se tiene que hacer el switch.
- switch-input: esta clase se otorga al elemento de entrada cuyo tipo debe ser una casilla de verificación y este es responsable de activar y desactivar el interruptor.
- 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.
- show-for-sr: esta clase se utiliza para enmascarar el texto.
Sintaxis:
<div class="switch">
<input class="switch-input" id="xy" type="checkbox" name="xy">
<label class="switch-paddle" for="xy">
<span class="show-for-sr">...</span>
</label>
</div>
Nota:
- El atributo for de la etiqueta es el que apunta a la entrada.
- Es el de un atributo que hace que se pueda hacer clic en el interruptor.
- Los valores de para el atributo de la etiqueta, la identificación de la entrada y el nombre de la entrada deben coincidir para garantizar que haya un vínculo entre estos dos elementos.
- El elemento con clase show-for-sr contiene texto que está enmascarado y es principalmente útil para describir la funcionalidad de ese elemento para personas con discapacidades visuales.
Ejemplo 1: este es un ejemplo básico que ilustra los conmutadores básicos creados con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS 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 Switch</strong> <br/><br/> <div class="switch"> <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch"> <label class="switch-paddle" for="exampleSwitch"> <span class="show-for-sr">GeeksforGeeks</span> </label> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Conceptos básicos del conmutador CSS básico
Ejemplo 2: Este es un ejemplo básico que ilustra una encuesta realizada con el conmutador Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Switch Basics</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 Switch Basics</strong> <br> <br> <p>For the Following questions below answer Yes/No</p> <ol> <li> <span>Do you like day over night.</span> <div class="switch"> <input class="switch-input" id="exampleSwitch1" type="checkbox" name="exampleSwitch1" checked> <label class="switch-paddle" for="exampleSwitch1"> <span class="show-for-sr">GeeksforGeeks</span> </label> </div> </li> <li> <span>You are hardworking over intelligent.</span> <div class="switch"> <input class="switch-input" id="exampleSwitch2" type="checkbox" name="exampleSwitch2"> <label class="switch-paddle" for="exampleSwitch2"> <span class="show-for-sr">GeeksforGeeks</span> </label> </div> </li> <li> <span>Your mental strength is good</span> <div class="switch"> <input class="switch-input" id="exampleSwitch3" type="checkbox" name="exampleSwitch3"> <label class="switch-paddle" for="exampleSwitch3"> <span class="show-for-sr">GeeksforGeeks</span> </label> </div> </li> </ol> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Conceptos básicos del conmutador CSS básico
Referencia: https://get.foundation/sites/docs/switch.html