ionic 单选框

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

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

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

实例:

<div class="list">
<label class="item item-radio">
  <input type="radio" name="group" value="go" checked="checked">
   <div class="radio-content">
   <div class="item-content">
    Go  
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>
<label class="item item-radio">
  <input type="radio" name="group" value="python">
  <div class="radio-content">
   <div class="item-content">
    Python  
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>
<label class="item item-radio">
  <input type="radio" name="group" value="ruby">
  <div class="radio-content">
   <div class="item-content">
    Ruby 
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>
<label class="item item-radio">
  <input type="radio" name="group" value=".net">
  <div class="radio-content">
   <div class="item-content">
    .Net  
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>
<label class="item item-radio">
  <input type="radio" name="group" value="java">
  <div class="radio-content">
   <div class="item-content">
    Java
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>
<label class="item item-radio">
  <input type="radio" name="group" value="php">
  <div class="radio-content">
   <div class="item-content">
    PHP   
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>
</div>


本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信