ionicCSS06_单复选框和选择框

1.单选框

ionic当选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。

每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。

ionic 在单选项中使用了 <label> 元素，使其更易点击。

<div class="content"><div class="list"><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"></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></div></div>

2.复选框

ionic里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。

以下实例演示了多个复选框的列表。

注意，每个选项的 item 类后需要添加 item-checkbox 类。

复选框可以使用checkbox-assertive 来指定颜色。

<div class="content"><ul class="list"><li class="item item-checkbox">     <label class="checkbox">       <input type="checkbox">     </label>     苹果</li><li class="item item-checkbox">     <label class="checkbox">       <input type="checkbox" checked="">     </label>     香蕉</li></ul></div>

3.选择框

 ionicselect 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。

每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android上会弹出单选按钮选项，iOS 有个滚轮操作界面。

<div class="content"><div class="list">  <label class="item item-input item-select">    <div class="input-label">      水果    </div>    <select>      <option>橘子</option>      <option selected>香蕉</option>      <option>芒果</option>    </select>  </label>  <label class="item item-input item-select">    <div class="input-label">      中国    </div>    <select>      <option>香港</option>      <option selected>澳门</option>      <option>台湾</option>    </select>  </label></div></div>