mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
211 lines
6.6 KiB
HTML
211 lines
6.6 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Input: Toggle</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
|
<link href="../../dist/css/ionic.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bar bar-header bar-dark">
|
|
<h1 class="title">Input: Toggle</h1>
|
|
</header>
|
|
|
|
<main class="content has-header">
|
|
|
|
<ul class="list">
|
|
<li class="item item-toggle">
|
|
HTML5
|
|
<label class="toggle">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle">
|
|
CSS3
|
|
<label class="toggle">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle">
|
|
Flashplayer
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle">
|
|
Java Applets
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle">
|
|
JavaScript
|
|
<label class="toggle">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle">
|
|
Silverlight
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
<i class="icon ion-star"></i>
|
|
Silverlight
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
toggle-positive
|
|
<label class="toggle toggle-positive">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
toggle-calm
|
|
<label class="toggle toggle-calm">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
toggle-balanced
|
|
<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-icon-left">
|
|
toggle-energized
|
|
<label class="toggle toggle-energized">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
toggle-assertive
|
|
<label class="toggle toggle-assertive">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
toggle-royal
|
|
<label class="toggle toggle-royal">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
toggle-light
|
|
<label class="toggle toggle-light">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
toggle-stable
|
|
<label class="toggle toggle-stable">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
toggle-dark
|
|
<label class="toggle toggle-dark">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
|
|
|
|
<li class="item item-toggle item-icon-left">
|
|
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
|
|
<label class="toggle toggle-dark">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
|
|
<div class="item-toggle item item-complex item-left-editable">
|
|
<div class="item-content">
|
|
.item.item-toggle.item-complex :
|
|
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
|
|
<label class="toggle toggle-assertive">
|
|
<input type="checkbox">
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="item-left-edit item-delete ng-hide">
|
|
<div class="ion-minus-circled button icon button-icon">
|
|
</div>
|
|
</div>
|
|
<div class="item-options invisible">
|
|
<div class="button-assertive button">
|
|
Edit
|
|
</div>
|
|
<div class="button-calm button" ng-click="share(item)">
|
|
Share
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</ul>
|
|
|
|
<div class="padding">
|
|
<a class="button button-secondary" href="./">All CSS Tests</a>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script src="../dist/js/ionic.js"></script>
|
|
|
|
</body>
|
|
</html>
|