ionic.css界面组件:表单-单选按钮

单选按钮的可视部件包括两部分:选中图标(.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>



你可能感兴趣的:(ionic.css界面组件:表单-单选按钮)