mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
167 lines
5.1 KiB
HTML
167 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="ionic">
|
|
<head>
|
|
<script src="../../dist/js/ionic.bundle.js"></script>
|
|
<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">
|
|
<style>
|
|
.content {
|
|
height: 1000px;
|
|
}
|
|
</style>
|
|
</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">
|
|
Default
|
|
<label class="toggle">
|
|
<input type="checkbox" checked>
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle item-icon-left">
|
|
<i class="icon ion-star"></i>
|
|
W/ Icon
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<div class="track">
|
|
<div class="handle"></div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li class="item item-toggle">
|
|
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">
|
|
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">
|
|
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">
|
|
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">
|
|
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">
|
|
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">
|
|
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">
|
|
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">
|
|
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">
|
|
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>
|
|
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|