ionic-CSS：ionic 单选框

ylbtech-ionic-CSS：ionic 单选框

1.返回顶部

1、

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>

尝试一下 »

运行效果如下：

2、

2.返回顶部

 

3.返回顶部

 

4.返回顶部

 

5.返回顶部

1、

http://www.runoob.com/ionic/ionic-radio.html

2、

 

6.返回顶部

 

作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。