Conmutador CSS básico deshabilitado

Posted on by Rudeus Greyrat

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. Cambiar, en general, da la opción al usuario 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. Switch Disabled significa que podemos deshabilitar la funcionalidad de un switch usando la clase apropiada requerida.

Foundation CSS Switch Clases deshabilitadas:

  • 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.
  • disabled: esta clase fija un interruptor en una posición fija o estática. Esto se puede lograr configurando esto en la entrada del interruptor.

Sintaxis:

<div class="switch">
     <input class="switch-input" id="xy" disabled type="checkbox">
     <label class="switch-paddle" for="xy">
           <span class="show-for-sr">...</span>
     </label>
</div>

Ejemplo 1: Este es un ejemplo básico que ilustra Switch Disabled realizado con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Switch Disabled</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 Disabled</strong>
    </center>
    <div style="margin: 3% 42%;">
          
<p>CheckedDisabledSwitch</p>
  
        <div class="switch">
            <input class="switch-input" disabled checked="checked" 
            id="exampleCheckedDisabledSwitch" type="checkbox"
                name="exampleCheckedDisabledSwitch">
            <label class="switch-paddle" for="exampleCheckedDisabledSwitch">
                <span class="show-for-sr">Can't Touch This Checked</span>
            </label>
        </div>
          
<p>UncheckedDisabledSwitch</p>
  
        <div class="switch">
            <input class="switch-input" disabled 
            id="exampleUncheckedDisabledSwitch" 
            type="checkbox"
            name="exampleUncheckedDisabledSwitch">
            <label class="switch-paddle" 
            for="exampleUncheckedDisabledSwitch">
                <span class="show-for-sr">
                      Can't Touch This Unchecked
                  </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 Switch Disabled hechos con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Switch Disabled</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 Disabled</strong>
          
<p>Different sizes of disabled switches</p>
  
    </center>
      
    <div style="margin: 5% 45%;">
        <div class="switch tiny">
            <input class="switch-input"
                 disabled checked="checked" 
                id="exampleCheckedDisabledSwitch" 
                type="checkbox"
                name="exampleCheckedDisabledSwitch">
            <label class="switch-paddle" 
                for="exampleCheckedDisabledSwitch">
                <span class="show-for-sr">
                    Can't Touch This Checked
                </span>
            </label>
        </div>
        <div class="switch tiny">
            <input class="switch-input" 
                disabled id="exampleUncheckedDisabledSwitch"
                type="checkbox"
                name="exampleUncheckedDisabledSwitch">
            <label class="switch-paddle" 
                for="exampleUncheckedDisabledSwitch">
                <span class="show-for-sr">
                    Can't Touch This Unchecked
                </span>
            </label>
        </div>
        <div class="switch small">
            <input class="switch-input" 
                disabled checked="checked" 
                id="exampleCheckedDisabledSwitch" 
                type="checkbox"
                name="exampleCheckedDisabledSwitch">
            <label class="switch-paddle" 
                for="exampleCheckedDisabledSwitch">
                <span class="show-for-sr">
                    Can't Touch This Checked
                </span>
            </label>
        </div>
        <div class="switch small">
            <input class="switch-input" 
                disabled id="exampleUncheckedDisabledSwitch" 
                type="checkbox"
                name="exampleUncheckedDisabledSwitch">
            <label class="switch-paddle" 
                for="exampleUncheckedDisabledSwitch">
                <span class="show-for-sr">
                    Can't Touch This Unchecked
                </span>
            </label>
        </div>
        <div class="switch medium">
            <input class="switch-input" 
                disabled checked="checked" 
                id="exampleCheckedDisabledSwitch" 
                type="checkbox"
                name="exampleCheckedDisabledSwitch">
            <label class="switch-paddle" 
                for="exampleCheckedDisabledSwitch">
                <span class="show-for-sr">
                    Can't Touch This Checked
                </span>
            </label>
        </div>
        <div class="switch medium">
            <input class="switch-input" 
                disabled id="exampleUncheckedDisabledSwitch" 
                type="checkbox"
                name="exampleUncheckedDisabledSwitch">
            <label class="switch-paddle" 
                for="exampleUncheckedDisabledSwitch">
                <span class="show-for-sr">
                    Can't Touch This Unchecked
                </span>
            </label>
        </div>
    </div>
      
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Referencia: https://get.foundation/sites/docs/switch.html

Publicación traducida automáticamente

Artículo escrito por abhivgk08 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *