mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
85 lines
3.1 KiB
HTML
85 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="ionicApp">
|
|
<head>
|
|
<script src="../../dist/js/ionic.bundle.js"></script>
|
|
<meta charset="utf-8">
|
|
<title>Input: Checkbox</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>
|
|
body {
|
|
position: absolute;;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bar bar-header bar-dark">
|
|
<h1 class="title">Input: Checkbox</h1>
|
|
</header>
|
|
|
|
<ion-content class="content has-header">
|
|
|
|
<ul class="list" ng-controller="MainCtrl">
|
|
<li class="item item-checkbox checkbox-circle">
|
|
<label class="checkbox">
|
|
<input type="checkbox" checked>
|
|
</label>
|
|
Flux Capacitor
|
|
</li>
|
|
<li class="item item-checkbox checkbox-square">
|
|
<label class="checkbox">
|
|
<input type="checkbox" checked>
|
|
</label>
|
|
1.21 Gigawatts
|
|
</li>
|
|
<li class="item item-checkbox checkbox-platform">
|
|
<label class="checkbox">
|
|
<input type="checkbox" checked>
|
|
</label>
|
|
88 MPH
|
|
</li>
|
|
<li class="item item-checkbox">
|
|
<label class="checkbox">
|
|
<input type="checkbox">
|
|
</label>
|
|
Plutonium Resupply
|
|
</li>
|
|
<li class="item item-checkbox item-checkbox-right">
|
|
<label class="checkbox">
|
|
<input type="checkbox">
|
|
</label>
|
|
Right side checkbox
|
|
</li>
|
|
<li class="item item-checkbox">
|
|
<label class="checkbox">
|
|
<input type="checkbox" disabled="disabled">
|
|
</label>
|
|
Disabled Checkbox
|
|
</li>
|
|
<li class="item-divider">Directives</li>
|
|
<ion-checkbox ng-model="test" ng-checked="test" ng-disabled="test">Disabled Directive</ion-checkbox>
|
|
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-light">Light Directive</ion-checkbox>
|
|
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-stable">Stable Directive</ion-checkbox>
|
|
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-positive">Positive Directive</ion-checkbox>
|
|
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-calm">Calm Directive</ion-checkbox>
|
|
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-assertive">Assertive Directive</ion-checkbox>
|
|
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-balanced">Balanced Directive</ion-checkbox>
|
|
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-energized">Energized Directive</ion-checkbox>
|
|
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-royal">Royal Directive</ion-checkbox>
|
|
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-dark">Dark Directive</ion-checkbox>
|
|
</ul>
|
|
|
|
</ion-content>
|
|
<script type="text/javascript">
|
|
angular.module('ionicApp', ['ionic'])
|
|
|
|
.controller('MainCtrl', function($scope) {
|
|
|
|
$scope.test = true;
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|