Foundation 开关

前言

• Foundation 开关。

1、开关

• 开关是在鼠标点击 (手指敲击) 下在 “On” 和 “Off” 状态下切换。

• 切换开关使用 <div class="switch"> 创建。<div> 内添加带有唯一 id 的 <input type="checkbox" />，<label> 元素的 for 属性需要与 <input type="checkbox"> 的 id 相匹配。

• 实例

  <div class="switch">
      <input id="mySwitch1" type="checkbox" />
      <label for="mySwitch1"></label>
  </div>
  
  <div class="switch">
      <input id="mySwitch2" type="checkbox" checked />
      <label for="mySwitch2"></label>
  </div>

• 效果 🔗

  

2、开关大小

• 使用 .large, .small 或 .tiny 类来设置开关大小：

• 实例

  <span>Large</span>
  <div class="switch large">
      <input id="mySwitch1" type="checkbox" checked />
      <label for="mySwitch1"></label>
  </div>
  
  <span>Default</span>
  <div class="switch">
      <input id="mySwitch2" type="checkbox" checked />
      <label for="mySwitch2"></label>
  </div>
  
  <span>Small</span>
  <div class="switch small">
      <input id="mySwitch3" type="checkbox" checked />
      <label for="mySwitch3"></label>
  </div>
  
  <span>Tiny</span>
  <div class="switch tiny">
      <input id="mySwitch4" type="checkbox" checked />
      <label for="mySwitch4"></label>
  </div>

• 效果 🔗

  

3、圆角切换开关

• 使用 .radius 和 .round 类来设置圆角切换开关：

• 实例

  <span>默认</span>
  <div class="switch">
      <input id="mySwitch1" type="checkbox" checked />
      <label for="mySwitch1"></label>
  </div>
  
  <span>圆角</span>
  <div class="switch radius">
      <input id="mySwitch2" type="checkbox" checked />
      <label for="mySwitch2"></label>
  </div>
  
  <span>圆形</span>
  <div class="switch round">
      <input id="mySwitch3" type="checkbox" checked />
      <label for="mySwitch3"></label>
  </div>

• 效果 🔗

  

4、开关组

• 可以通过设置单选按钮 (radio) 来设置单个选项。注意各个选项的 name 属性必须一致 (实例中为 “myGroup”)。

• 即一组开关中同时只有一个是 “On” 的。

• 实例

  <div class="switch">
      <input id="mySwitch1" type="radio" name="myGroup" />
      <label for="mySwitch1"></label>
  </div>
  
  <div class="switch">
      <input id="mySwitch2" type="radio" checked name="myGroup" />
      <label for="mySwitch2"></label>
  </div>
  
  <div class="switch">
      <input id="mySwitch3" type="radio" name="myGroup" />
      <label for="mySwitch3"></label>
  </div>

• 效果 🔗