Sizing Classes

优质

小牛编辑

125浏览

2023-12-01

描述 (Description)

您可以使用.tiny ， .small或.large类来更改开关的大小。

例子 (Example)

以下示例演示如何更改Foundation中size of switch 。

<html>
   <head>
      <title>Sizing Classes</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
   </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 src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>