ionic中 开关 .toggle input[type="checkbox"]
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
开关通常用来设置两种状态 - 开启和关闭：
正如上图中所见，开关的可视部件包括两部分：滑轨（.track）和手柄（.handle）。 ionic使用如下HTML模板创建开关组件：
<any class="toggle"> <input type="checkbox"> <any class="track"> <any class="handle"></any> </any></any>
开关也有配色方案样式：.toggle-{color}，用来改变滑轨的背景色。
<!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-stable">
<button class="button button-clear button-positive icon ion-ios-arrow-left">设置</button>
<h1 class="title">信息</h1>
</div>
<div class="scroll-content has-header">
<ul class="list">
<li class="item item-toggle">
iMessage
<label class="toggle toggle-balanced">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-divider">短信/彩信</li>
<li class="item item-toggle">
字符计数
<label class="toggle toggle-balanced">
<input type="checkbox" checked>
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle item-button-right">
黑名单
<a class="button button-clear icon ion-ios-arrow-right"></a>
</li>
</ul>
</div>
</body>
</html>