简介

这一篇主要介绍一些调整型的控件，比如说切换开关、复选框、单选框、滑块空间啊什么的。看名字概念不清晰没关系，看到代码效果姐很好理解了。

为了封面好看，先贴最后效果，就是这么耿直

切换开关类似与 HTML 的checkbox标签，但它更易于在移动设备上使用。切换开关可以使用toggle-assertive来指定颜色。checked=""的意思是初始状态设置开启。

<div class="bar bar-header">
  <div class="h1 title">切换开关</div>
</div>

<div class="content has-header">

  <ul class="card">
    <li class="item item-toggle">
      positive
      <label class="toggle toggle-positive">
        <input type="checkbox" checked="">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
    <li class="item item-toggle">
      calm
      <label class="toggle toggle-calm">
        <input type="checkbox" checked="">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
    <li class="item item-toggle">
      balanced
      <label class="toggle toggle-balanced">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
    <li class="item item-toggle">
      energized
      <label class="toggle toggle-energized">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
    <li class="item item-toggle">
      assertive
      <label class="toggle toggle-assertive">
        <input type="checkbox" checked="">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
    <li class="item item-toggle">
      royal
      <label class="toggle toggle-royal">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
    <li class="item item-toggle">
      dark
      <label class="toggle toggle-dark">
        <input type="checkbox" checked="">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
  </ul>

</div>

对于切换开关，每个选项的item类后需要添加item-toggle类。而对于复选框，每个选项的item类后需要添加item-checkbox类。复选框可以使用checkbox-assertive来指定颜色。单选框使用item-radio类。

   <li class="item item-checkbox">
      复选框
      <label class="checkbox checkbox-balanced">
        <input type="checkbox">
      </label>
    </li>
    <li class="item item-checkbox">
      复选框
      <label class="checkbox">
        <input type="checkbox" checked="">
      </label>
    </li>

    <label class="item item-radio">
      <input type="radio" name="group" value="单选框" checked="checked">
      <div class="radio-content">
        <div class="item-content">
          单选框
        </div>
        <i class="radio-icon ion-checkmark  item-assertive"></i>
      </div>
    </label>

    <label class="item item-radio">
      <input type="radio" name="group" value="单选框">
      <div class="radio-content">
        <div class="item-content">
          单选框
        </div>
        <i class="radio-icon ion-checkmark"></i>
      </div>
    </label>

select用于弹出下拉菜单，ionic Range是一个滑块控件。

<div class="bar bar-header">
  <div class="h1 title">加入下拉列表和滑块</div>
</div>

<div class="content has-header">

  <ul class="card">
    <div class="item item-input item-select">
      <div class="input-label">
        用户名
      </div>
      <select>
        <option>张一</option>
        <option>张二</option>
        <option selected="">张三</option>
        <option>张四</option>
      </select>
    </div>
    <li class="item item-toggle">
      默认
      <label class="toggle">
        <input type="checkbox" checked="">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
    <li class="item item-toggle">
      calm
      <label class="toggle toggle-calm">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
    <div class="item range range-positive">
      <i class="icon ion-ios-sunny-outline"></i>
      <input type="range" name="volume" min="0" max="100" value="12">
      <i class="icon ion-ios-sunny"></i>
    </div>
    <li class="item item-checkbox">
      复选框
      <label class="checkbox checkbox-balanced">
        <input type="checkbox">
      </label>
    </li>
    <li class="item item-checkbox">
      复选框
      <label class="checkbox">
        <input type="checkbox" checked="">
      </label>
    </li>

    <label class="item item-radio">
      <input type="radio" name="group" value="单选框" checked="checked">
      <div class="radio-content">
        <div class="item-content">
          单选框
        </div>
        <i class="radio-icon ion-checkmark  item-assertive"></i>
      </div>
    </label>

    <label class="item item-radio">
      <input type="radio" name="group" value="单选框">
      <div class="radio-content">
        <div class="item-content">
          单选框
        </div>
        <i class="radio-icon ion-checkmark"></i>
      </div>
    </label>


    <li class="item item-toggle">
      dark
      <label class="toggle toggle-dark">
        <input type="checkbox" checked="">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </li>
  </ul>

</div>

全文GG