mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Initial Commit
This commit is contained in:
Mike Hartington
33
demos/ActionSheet/index.html
Normal file
33
demos/ActionSheet/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/ActionSheet/script.js
Normal file
7
demos/ActionSheet/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/ActionSheet/style.css
Normal file
41
demos/ActionSheet/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/App Intro Walkthrough/index.html
Normal file
33
demos/App Intro Walkthrough/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/App Intro Walkthrough/script.js
Normal file
7
demos/App Intro Walkthrough/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/App Intro Walkthrough/style.css
Normal file
41
demos/App Intro Walkthrough/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Checkbox/index.html
Normal file
33
demos/Checkbox/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Checkbox/script.js
Normal file
7
demos/Checkbox/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Checkbox/style.css
Normal file
41
demos/Checkbox/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Custom Loading Bar/index.html
Normal file
33
demos/Custom Loading Bar/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Custom Loading Bar/script.js
Normal file
7
demos/Custom Loading Bar/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Custom Loading Bar/style.css
Normal file
41
demos/Custom Loading Bar/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Flickr Search Example/index.html
Normal file
33
demos/Flickr Search Example/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Flickr Search Example/script.js
Normal file
7
demos/Flickr Search Example/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Flickr Search Example/style.css
Normal file
41
demos/Flickr Search Example/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Frosted Glass Effect/index.html
Normal file
33
demos/Frosted Glass Effect/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Frosted Glass Effect/script.js
Normal file
7
demos/Frosted Glass Effect/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Frosted Glass Effect/style.css
Normal file
41
demos/Frosted Glass Effect/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Google Maps/index.html
Normal file
33
demos/Google Maps/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Google Maps/script.js
Normal file
7
demos/Google Maps/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Google Maps/style.css
Normal file
41
demos/Google Maps/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Lists/index.html
Normal file
33
demos/Lists/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Lists/script.js
Normal file
7
demos/Lists/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Lists/style.css
Normal file
41
demos/Lists/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Modal/index.html
Normal file
33
demos/Modal/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Modal/script.js
Normal file
7
demos/Modal/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Modal/style.css
Normal file
41
demos/Modal/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Popup/index.html
Normal file
33
demos/Popup/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Popup/script.js
Normal file
7
demos/Popup/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Popup/style.css
Normal file
41
demos/Popup/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
36
demos/Pull To Refresh/index.html
Normal file
36
demos/Pull To Refresh/index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Template</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MyCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Refresher</h1>
|
||||
</ion-header-bar>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher on-refresh="doRefresh()" pulling-text="Pull to refresh..." refreshing-text="Refreshing!" refreshing-icon="ion-loading-c">
|
||||
|
||||
</ion-refresher>
|
||||
<ion-list>
|
||||
<ion-item ng-repeat="item in items">{{item}}</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
26
demos/Pull To Refresh/script.js
Normal file
26
demos/Pull To Refresh/script.js
Normal file
@@ -0,0 +1,26 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MyCtrl', function($scope, $timeout) {
|
||||
$scope.myTitle = 'Template';
|
||||
|
||||
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
|
||||
|
||||
|
||||
$scope.doRefresh = function() {
|
||||
|
||||
console.log('Refreshing!');
|
||||
$timeout( function() {
|
||||
|
||||
$scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);
|
||||
$scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);
|
||||
$scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);
|
||||
$scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);
|
||||
|
||||
//Stop the ion-refresher from spinning
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
|
||||
}, 1000);
|
||||
|
||||
};
|
||||
|
||||
});
|
||||
3
demos/Pull To Refresh/style.css
Normal file
3
demos/Pull To Refresh/style.css
Normal file
@@ -0,0 +1,3 @@
|
||||
body {
|
||||
cursor: url('http://ionicframework.com/img/finger.png'), auto;
|
||||
}
|
||||
49
demos/Radio Buttons/index.html
Normal file
49
demos/Radio Buttons/index.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Radio Buttons</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Radio Buttons</h1>
|
||||
</ion-header-bar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="item item-divider">
|
||||
Clientside, Selected Value: {{ data.clientSide }}
|
||||
</div>
|
||||
|
||||
<ion-radio ng-repeat="item in clientSideList" ng-value="item.value" ng-model="data.clientSide">
|
||||
{{ item.text }}
|
||||
</ion-radio>
|
||||
|
||||
<div class="item item-divider">
|
||||
Serverside, Selected Value: {{ data.serverSide }}
|
||||
</div>
|
||||
|
||||
<ion-radio ng-repeat="item in serverSideList" ng-value="item.value" ng-model="data.serverSide" ng-change="serverSideChange(item)" name="server-side">
|
||||
{{ item.text }}
|
||||
</ion-radio>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
51
demos/Radio Buttons/script.js
Normal file
51
demos/Radio Buttons/script.js
Normal file
@@ -0,0 +1,51 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', function ($scope) {
|
||||
|
||||
$scope.clientSideList = [
|
||||
{
|
||||
text: "Backbone",
|
||||
value: "bb"
|
||||
},
|
||||
{
|
||||
text: "Angular",
|
||||
value: "ng"
|
||||
},
|
||||
{
|
||||
text: "Ember",
|
||||
value: "em"
|
||||
},
|
||||
{
|
||||
text: "Knockout",
|
||||
value: "ko"
|
||||
}
|
||||
];
|
||||
|
||||
$scope.serverSideList = [
|
||||
{
|
||||
text: "Go",
|
||||
value: "go"
|
||||
},
|
||||
{
|
||||
text: "Python",
|
||||
value: "py"
|
||||
},
|
||||
{
|
||||
text: "Ruby",
|
||||
value: "rb"
|
||||
},
|
||||
{
|
||||
text: "Java",
|
||||
value: "jv"
|
||||
}
|
||||
];
|
||||
|
||||
$scope.data = {
|
||||
clientSide: 'ng'
|
||||
};
|
||||
|
||||
$scope.serverSideChange = function (item) {
|
||||
console.log("Selected Serverside, text:", item.text, "value:", item.value);
|
||||
};
|
||||
|
||||
});
|
||||
3
demos/Radio Buttons/style.css
Normal file
3
demos/Radio Buttons/style.css
Normal file
@@ -0,0 +1,3 @@
|
||||
body {
|
||||
cursor: url('http://ionicframework.com/img/finger.png'), auto;
|
||||
}
|
||||
33
demos/Shrinking Header/index.html
Normal file
33
demos/Shrinking Header/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Shrinking Header/script.js
Normal file
7
demos/Shrinking Header/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Shrinking Header/style.css
Normal file
41
demos/Shrinking Header/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Side Menu and Navigation/index.html
Normal file
33
demos/Side Menu and Navigation/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Side Menu and Navigation/script.js
Normal file
7
demos/Side Menu and Navigation/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Side Menu and Navigation/style.css
Normal file
41
demos/Side Menu and Navigation/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Sign-in, then Tabs/index.html
Normal file
33
demos/Sign-in, then Tabs/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Sign-in, then Tabs/script.js
Normal file
7
demos/Sign-in, then Tabs/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Sign-in, then Tabs/style.css
Normal file
41
demos/Sign-in, then Tabs/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Starter Template/index.html
Normal file
33
demos/Starter Template/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Template</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
|
||||
<body ng-controller="MyCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<button class="button" ng-click="doSomething()">
|
||||
Do Something!
|
||||
</button>
|
||||
<h1 class="title">{{myTitle}}</h1>
|
||||
|
||||
</ion-header-bar>
|
||||
|
||||
<ion-content padding="true">
|
||||
<h2>Content</h2>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
68
demos/Starter Template/script.js
Normal file
68
demos/Starter Template/script.js
Normal file
@@ -0,0 +1,68 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.config(function ($stateProvider, $urlRouterProvider) {
|
||||
|
||||
$stateProvider
|
||||
.state('tabs', {
|
||||
url: "/tab",
|
||||
abstract: true,
|
||||
templateUrl: "tabs.html"
|
||||
})
|
||||
.state('tabs.home', {
|
||||
url: "/home",
|
||||
views: {
|
||||
'home-tab': {
|
||||
templateUrl: "home.html",
|
||||
controller: 'HomeTabCtrl'
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('tabs.facts', {
|
||||
url: "/facts",
|
||||
views: {
|
||||
'home-tab': {
|
||||
templateUrl: "facts.html"
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('tabs.facts2', {
|
||||
url: "/facts2",
|
||||
views: {
|
||||
'home-tab': {
|
||||
templateUrl: "facts2.html"
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('tabs.about', {
|
||||
url: "/about",
|
||||
views: {
|
||||
'about-tab': {
|
||||
templateUrl: "about.html"
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('tabs.navstack', {
|
||||
url: "/navstack",
|
||||
views: {
|
||||
'about-tab': {
|
||||
templateUrl: "nav-stack.html"
|
||||
}
|
||||
}
|
||||
})
|
||||
.state('tabs.contact', {
|
||||
url: "/contact",
|
||||
views: {
|
||||
'contact-tab': {
|
||||
templateUrl: "contact.html"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$urlRouterProvider.otherwise("/tab/home");
|
||||
|
||||
})
|
||||
|
||||
.controller('HomeTabCtrl', function ($scope) {
|
||||
console.log('HomeTabCtrl');
|
||||
});
|
||||
3
demos/Starter Template/style.css
Normal file
3
demos/Starter Template/style.css
Normal file
@@ -0,0 +1,3 @@
|
||||
body {
|
||||
cursor: url('http://ionicframework.com/img/finger.png'), auto;
|
||||
}
|
||||
33
demos/Swipeable Cards/index.html
Normal file
33
demos/Swipeable Cards/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Swipeable Cards/script.js
Normal file
7
demos/Swipeable Cards/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Swipeable Cards/style.css
Normal file
41
demos/Swipeable Cards/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
121
demos/Tabs And Navigation/index.html
Normal file
121
demos/Tabs And Navigation/index.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Tabs Example</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
|
||||
<ion-nav-back-button class="button-icon ion-arrow-left-c">
|
||||
</ion-nav-back-button>
|
||||
</ion-nav-bar>
|
||||
|
||||
<ion-nav-view animation="slide-left-right"></ion-nav-view>
|
||||
|
||||
|
||||
<script id="tabs.html" type="text/ng-template">
|
||||
<ion-tabs class="tabs-icon-top tabs-positive">
|
||||
|
||||
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
|
||||
<ion-nav-view name="home-tab"></ion-nav-view>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
|
||||
<ion-nav-view name="about-tab"></ion-nav-view>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tabs.contact">
|
||||
<ion-nav-view name="contact-tab"></ion-nav-view>
|
||||
</ion-tab>
|
||||
|
||||
</ion-tabs>
|
||||
</script>
|
||||
|
||||
<script id="home.html" type="text/ng-template">
|
||||
<ion-view title="Home">
|
||||
<ion-content class="padding">
|
||||
<p>Example of Ionic tabs. Navigate to each tab, and
|
||||
navigate to child views of each tab and notice how
|
||||
each tab has its own navigation history.</p>
|
||||
<p>
|
||||
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
|
||||
<script id="facts.html" type="text/ng-template">
|
||||
<ion-view title="Facts" class="padding">
|
||||
<ion-content>
|
||||
<p>Banging your head against a wall uses 150 calories an hour.</p>
|
||||
<p>Dogs have four toes on their hind feet, and five on their front feet.</p>
|
||||
<p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
|
||||
<p>A cockroach will live nine days without it's head, before it starves to death.</p>
|
||||
<p>Polar bears are left handed.</p>
|
||||
<p>
|
||||
<a class="button icon ion-home" href="#/tab/home"> Home</a>
|
||||
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
|
||||
<script id="facts2.html" type="text/ng-template">
|
||||
<ion-view title="Also Factual">
|
||||
<ion-content class="padding">
|
||||
<p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
|
||||
<p>1 in every 4 Americans has appeared on T.V.</p>
|
||||
<p>11% of the world is left-handed.</p>
|
||||
<p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
|
||||
<p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
|
||||
<p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
|
||||
<p>
|
||||
<a class="button icon ion-home" href="#/tab/home"> Home</a>
|
||||
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
|
||||
<script id="about.html" type="text/ng-template">
|
||||
<ion-view title="About">
|
||||
<ion-content class="padding">
|
||||
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
|
||||
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
|
||||
<p>Built with Sass and optimized for AngularJS.</p>
|
||||
<p>
|
||||
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
|
||||
<script id="nav-stack.html" type="text/ng-template">
|
||||
<ion-view title="Tab Nav Stack">
|
||||
<ion-content class="padding">
|
||||
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
|
||||
<script id="contact.html" type="text/ng-template">
|
||||
<ion-view title="Contact">
|
||||
<ion-content>
|
||||
<p>@IonicFramework</p>
|
||||
<p>@DriftyCo</p>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
7
demos/Tabs And Navigation/script.js
Normal file
7
demos/Tabs And Navigation/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Tabs And Navigation/style.css
Normal file
41
demos/Tabs And Navigation/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Thumbnail List/index.html
Normal file
33
demos/Thumbnail List/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Thumbnail List/script.js
Normal file
7
demos/Thumbnail List/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Thumbnail List/style.css
Normal file
41
demos/Thumbnail List/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
33
demos/Toggle/index.html
Normal file
33
demos/Toggle/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="ionicApp">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||||
|
||||
<title>Ionic Modal</title>
|
||||
|
||||
<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
|
||||
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="MainCtrl">
|
||||
|
||||
<ion-header-bar class="bar-positive">
|
||||
<h1 class="title">Hello!</h1>
|
||||
</ion-header-bar>
|
||||
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
|
||||
Loading...
|
||||
</div>
|
||||
<ion-content ng-class="{'has-loading': data.isLoading}">
|
||||
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
|
||||
</ion-content>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
demos/Toggle/script.js
Normal file
7
demos/Toggle/script.js
Normal file
@@ -0,0 +1,7 @@
|
||||
angular.module('ionicApp', ['ionic'])
|
||||
|
||||
.controller('MainCtrl', ['$scope', function($scope) {
|
||||
$scope.data = {
|
||||
isLoading: false
|
||||
};
|
||||
}]);
|
||||
41
demos/Toggle/style.css
Normal file
41
demos/Toggle/style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.bar.bar-loading {
|
||||
display: block;
|
||||
height: 24px;
|
||||
|
||||
/* starts right below a normal header */
|
||||
top: 44px;
|
||||
|
||||
/* make the text centered vertically and horizontally */
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
/* transition 'sliding down' (check below)*/
|
||||
-webkit-transition: 200ms all;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* make the content's top changes animate.
|
||||
* might not always look good, but looks
|
||||
* good when our loader is added & removed
|
||||
*/
|
||||
.has-header {
|
||||
-webkit-transition: 200ms top;
|
||||
}
|
||||
.has-header.has-loading {
|
||||
/* 44px (header) + 24px */
|
||||
top: 68px;
|
||||
}
|
||||
|
||||
/* make loading bar slide up/down */
|
||||
.bar-loading.ng-enter,
|
||||
.bar-loading.ng-leave.ng-leave-active {
|
||||
height: 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
.bar-loading.ng-enter.ng-enter-active,
|
||||
.bar-loading.ng-leave {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
}
|
||||
Reference in New Issue
Block a user