码迷,mamicode.com
首页 > Web开发 > 详细

ionic-CSS:ionic 单选框

时间:2018-05-07 19:37:58      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:css   页面   type   style   targe   idt   example   amp   strong   

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、
2、
 
6.返回顶部
 
技术分享图片 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

ionic-CSS:ionic 单选框

标签:css   页面   type   style   targe   idt   example   amp   strong   

原文地址:https://www.cnblogs.com/storebook/p/9004014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!