首页
会员中心
到顶部
到尾部
ionic教程

ionic 单选框

时间:2020/11/3 9:59:34  作者:  来源:  查看:0  评论:0
内容摘要:ionic 单选框ionic 单选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。...

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>

尝试一下 ?

运行效果如下:



上一篇:ionic checkbox
下一篇:ionic range
相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号