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>