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

时间 2019-11-15

标签 ionic.css ionic css 界面组件表单单选按钮栏目 CSS 繁體版

原文原文链接

单选按钮的可视部件包括两部分：选中图标（.radio-icon）和描述内容（.item-content），你能够在.item-content随便添加内容。css

单选按钮基于HTML的radio input元素实现。使用以下的HTML模板声明单选按钮：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>

单选按钮一般不单独使用，将他们放入一个列表中：ios

<any class="list">
    <any class="item item-radio">...</any>
    <any class="item item-radio">...</any>
    ...
</any>

须要注意的是，group-name决定了单选按钮的分组，因此对于互斥的选择项，必须将它们的group-name设置为相同的名称。ionic

综上实例：ide

<!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>