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. Las etiquetas internas son el texto que podemos dar dentro de un interruptor que actúa como una etiqueta para nuestro interruptor.
Foundation CSS Cambiar clases de etiquetas internas:
- switch: Esta clase se le da al elemento del cual se tiene que hacer el switch.
- interruptor activo: esta clase contiene texto activo que se muestra solo cuando el interruptor está encendido.
- interruptor inactivo: esta clase contiene texto inactivo que se muestra solo cuando el interruptor está apagado.
Sintaxis:
<div class="switch"> <input class="switch-input" id="xyz" type="checkbox"> <label class="switch-paddle" for="xyz"> <span class="switch-active">active text</span> <span class="switch-inactive">in-active text</span> </label> </div>
Ejemplo 1: este es un ejemplo básico que ilustra las etiquetas internas de Switch hechas con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Switch Inner Labels</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 Inner Labels</strong> </center> <div class="switch large"> <input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch"> <label class="switch-paddle" for="yes-no"> <span class="switch-active" aria-hidden="true">Yes</span> <span class="switch-inactive" aria-hidden="true">No</span> </label> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: Este es un ejemplo básico que ilustra las etiquetas internas de interruptores de radio hechas con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS InnerLabels 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 InnerLabels Switch</strong> <p>Select Your Age below</p> </center> <div style="margin: 5% 40%;"> <span>Age below 19</span> <div class="switch large"> <input class="switch-input" id="yes-no1" type="radio" name="exampleSwitch"> <label class="switch-paddle" for="yes-no1"> <span class="show-for-sr">Do you like me?</span> <span class="switch-active" aria-hidden="true">Yes</span> <span class="switch-inactive" aria-hidden="true">No</span> </label> </div> <span>Age between 20-45</span> <div class="switch large"> <input class="switch-input" id="yes-no2" type="radio" name="exampleSwitch"> <label class="switch-paddle" for="yes-no2"> <span class="show-for-sr">Do you like me?</span> <span class="switch-active" aria-hidden="true">Yes</span> <span class="switch-inactive" aria-hidden="true">No</span> </label> </div> <span>Age above 45</span> <div class="switch large"> <input class="switch-input" id="yes-no3" type="radio" name="exampleSwitch"> <label class="switch-paddle" for="yes-no3"> <span class="show-for-sr">Do you like me?</span> <span class="switch-active" aria-hidden="true">Yes</span> <span class="switch-inactive" aria-hidden="true">No</span> </label> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/switch.html