Foundation - Sizing Classes

Description

You can change the size of the switches by using .tiny, .small or .large classes.

Example

The following example demonstrates how to change size of switch in Foundation.

Live Demo 
<html>
   <head>
      <title>Sizing Classes</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- 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" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <div class = "switch tiny">
         <input class = "switch-input" id = "tinySwitch" type = "checkbox" name = "demoSwitch">
         <label class = "switch-paddle" for = "tinySwitch">
            <span class = "show-for-sr">Tiny Switch</span>
         </label>
      </div>

      <div class = "switch small">
         <input class = "switch-input" id = "smallSwitch" type = "checkbox" name = "demoSwitch">
         <label class = "switch-paddle" for = "smallSwitch">
            <span class = "show-for-sr">Small Switch</span>
         </label>
      </div>

      <div class = "switch large">
         <input class = "switch-input" id = "largeSwitch" type = "checkbox" name = "demoSwitch">
         <label class = "switch-paddle" for = "largeSwitch">
            <span class = "show-for-sr">Large Switch</span>
         </label>
      </div>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given html code radio_switch_sizing_classes.html file.

  • Open this HTML file in a browser, an output is displayed as shown below.

foundation_basic_controls.htm
Advertisements