Clases de cambio de tamaño de Foundation CSS Switch

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. 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. Clases de tamaño significa las diferentes clases disponibles en función de las cuales seleccionamos el tamaño del interruptor.

Clases de cambio de tamaño de Foundation CSS Switch:

  • switch: Esta clase se le da al elemento del cual se tiene que hacer el switch.
  • tiny:  esta clase establece el tamaño del interruptor en tiny.
  • pequeño: esta clase establece el tamaño del interruptor en pequeño.
  • grande: esta clase establece el tamaño del conmutador en grande.

Sintaxis:

<div class="switch size-class">
 <input class="switch-input" id="xy" 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 las clases básicas de dimensionamiento de interruptores realizadas con 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:

Ejemplo 2: este es un ejemplo básico que ilustra las clases de dimensionamiento de interruptores de radio creados con 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>
    <!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>
            
<p>Radio Type Switch of different sizes</p>
  
        </center>
        <div style="margin: 5% 45%">
          <span>Tiny Switch</span>
          <div class="switch tiny">
            <input
              class="switch-input"
              id="tinySwitch"
              type="radio"
              name="exampleSwitch"
              checked
            />
            <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="radio"
              name="exampleSwitch"
            />
            <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="radio"
              name="exampleSwitch"
            />
            <label class="switch-paddle" for="largeSwitch">
              <span class="show-for-sr">Show Large Elephants</span>
            </label>
          </div>
        </div>
        <script>
          $(document).foundation();
        </script>
      </body>
    </html>
    <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:

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 *