ionic
HTML
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css">
<ion-list>
<ion-checkbox ng-model="filter.red">Red</ion-checkbox>
<ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox>
<ion-checkbox ng-model="filter.pink">Pink</ion-checkbox>
</ion-list>
CSS
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.item-complex .item-content, .item-radio .item-content{
background-color: none;
}
.item{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
JavaScript
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function ($scope) {
$scope.toggleStretchedMode = function(itemID) {
$scope.stretched = $scope.stretched === false ? true: false;
var targetDiv = document.getElementById(itemID);
console.log(targetDiv);
if(!$scope.stretched){
targetDiv.style.height = 'initial';
}
else
{
targetDiv.style.background = 'orange';
targetDiv.style.height = '100vh';
};
}
});
})(SampleApp || (SampleApp = {}));