您好，欢迎来到刀刀网。
科技 教育 生活 旅游 时尚 美容 美食 健康 体育 游戏 汽车 家电
搜索
您的当前位置：首页ionic之样式复选框

ionic之样式复选框

来源：刀刀网
 1、实例背景

ionic复选框用的是checkbox，checkbox有各种各样的样式

2、实例源码

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>ionic之样式复选框</title>
	<link rel="stylesheet" href="../css/ionic.css" />
	<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
	</head>
	<body ng-app="calmApp" ng-controller="calmController">
	<p class="content has-header">
	<ul class="list">
	<li class="item item-checkbox">
	<label class="checkbox">
	<input type="checkbox" />
	</label>
	一月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-assertive">
	<input type="checkbox" />
	</label>
	二月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-balanced">
	<input type="checkbox" />
	</label>
	三月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-calm">
	<input type="checkbox" />
	</label>
	四月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-dark">
	<input type="checkbox" />
	</label>
	五月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-energized">
	<input type="checkbox" />
	</label>
	六月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-light">
	<input type="checkbox" />
	</label>
	七月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-platform">
	<input type="checkbox" />
	</label>
	八月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-positive">
	<input type="checkbox" />
	</label>
	九月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-royal">
	<input type="checkbox" />
	</label>
	十月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-square">
	<input type="checkbox" />
	</label>
	十一月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-stable">
	<input type="checkbox" />
	</label>
	十二月
	</li>
	<li class="item item-checkbox">
	<label class="checkbox checkbox-stable">
	<input type="checkbox" />
	</label>
	十二月
	</li>
	</ul>
	</p>
	</body>
</html>


3、实例结果

Copyright © 2019- gamedaodao.com 版权所有 湘ICP备2022005869号-6

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务