Toggling the footer
Created
March 29, 2015 07:41
-
-
Save zxshinxz/9d41ce1d1aa742cd870f to your computer and use it in GitHub Desktop.
Footer Toggle: Nightly
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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>Toggle Footer</title> | |
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> | |
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> | |
</head> | |
<body ng-controller="AppCtrl"> | |
<ion-content padding="true" ng-class="{'has-footer': showFooter}"> | |
<button ng-click="toggleFooter()" class="button button-assertive">Toggle Footer</button> | |
</ion-content> | |
<ion-footer-bar class="bar-assertive" ng-if="showFooter"> | |
</ion-footer-bar> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module('ionicApp', ['ionic']) | |
.controller('AppCtrl', function($scope) { | |
$scope.showFooter = true; | |
$scope.toggleFooter = function() { | |
console.log('Toggling footer'); | |
$scope.showFooter = !$scope.showFooter; | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment