Cambio de CSS básico

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.

Switch en general le da al usuario la opción de seleccionar una de las dos posibilidades presentes. 

En este artículo, discutiremos todas las propiedades de cambio utilizadas en Foundation CSS.

Clases de cambio de CSS de la Fundación:

  • Conceptos básicos : utiliza las clases switch , switch-input , switch-paddle y show-for-sr para crear conmutadores básicos. 
  • Deshabilitado : utiliza un atributo deshabilitado que fija un interruptor en una posición fija o estática. Esto se puede lograr configurando esto en el control de entrada que tiene la clase de entrada de interruptor .
  • Interruptor de radio: utiliza el atributo type=”radio” que indica el tipo de entrada del elemento con la clase switch-input .
  • Clases de tamaño: utiliza clases como tiny , small y large para proporcionar diferentes tamaños a los botones.
  • Etiquetas internas: esto utiliza clases de interruptor activo e interruptor inactivo para indicar el texto que se habilitará y deshabilitará respectivamente cuando se alterna el interruptor. 

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>

Ejemplo 1: el siguiente ejemplo 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: El siguiente ejemplo ilustra los interruptores deshabilitados creados 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:

Interruptor deshabilitado de Foundation CSS

Ejemplo 3: El siguiente ejemplo ilustra los conmutadores 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>
    </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:

Interruptor de radio Foundation CSS

Ejemplo 4: El siguiente ejemplo ilustra los interruptores creados usando clases de tamaño en Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Foundation CSS Switch Sizing Classes</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 Sizing Classes</strong>
    </center>
    <div style="margin:5% 45%">
        <span>Tiny Switch</span>
        <div class="switch tiny">
            <input class="switch-input" id="tinySwitch" type="checkbox"
                   name="exampleSwitch1"
            />
            <label class="switch-paddle" for="tinySwitch">
                <span class="show-for-sr">Tiny Sandwiches Enabled</span>
            </label>
        </div>
        <span>Small Switch</span>
        <div class="switch small">
            <input class="switch-input" id="smallSwitch" type="checkbox"
                  name="exampleSwitch2"
            />
            <label class="switch-paddle" for="smallSwitch">
                <span class="show-for-sr">Small Portions Only</span>
            </label>
        </div>
        <span>Large Switch</span>
        <div class="switch large">
            <input class="switch-input" id="largeSwitch" type="checkbox"
                  name="exampleSwitch3"
            />
            <label class="switch-paddle" for="largeSwitch">
               <span class="show-for-sr">Show Large Elephants</span>
            </label>
        </div>
    </div>
  
    <script>
        $(document).foundation();
    </script>
</body>
    
</html>

Producción:

Cambio de tamaño de Foundation CSS

Ejemplo 5: el siguiente ejemplo ilustra los interruptores de etiquetas internas creados 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:
 

Interruptor de etiquetas internas de Foundation CSS

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

Publicación traducida automáticamente

Artículo escrito por yasarnnp 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 *