单选按钮的可视部件包括两部分:选中图标(.radio-icon) 和描述内容(.item-content),你可以在.item-content随便添加 内容。
单选按钮基于HTML的radio input元素实现。使用如下的HTML模板 声明单选按钮:
<any class="item-radio">
<input type="radio" name="{group-name}">
<any class="item-content">...</any>
<any class="radio-icon ion-checkmark {color}"></any> //ion-checkmark:图标; {color}:图标颜色 example:.assertive
</any>
单选按钮通常不单独使用,将他们放入一个列表中:
<any class="list">
<any class="item item-radio">...</any>
<any class="item item-radio">...</any>
...
</any>
需要注意的是,group-name决定了单选按钮的分组,所以对于互斥的选择项,必须 将它们的group-name设置为相同的名称。
综上实例:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
<div class="bar bar-header bar-assertive">
<a class="button icon ion-ios-undo"></a>
<h1 class="title">确认订单</h1>
</div>
<div class="scroll-content has-header padding">
<div class="list">
<div class="item item-divider"><b>请选择支付方式</b></div>
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">支付宝客户端支付</div>
<i class="radio-icon ion-checkmark assertive"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">支付宝网页支付</div>
<i class="radio-icon ion-checkmark assertive"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" checked>
<div class="item-content">一键支付(无需支付宝账户)</div>
<i class="radio-icon ion-checkmark assertive"></i>
<i class="radio-icon ion-close assertive"></i>
</label>
</div>
<button class="button button-block button-assertive">立即购买</button>
</div>
</body>
</html>