<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>UI.Layout : holy grail demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="DemoController">
<div ui-layout="config" ui-layout-loaded>
<div ui-layout-container collapsed="layout.one">
One
<br/>
<button ng-click="updateDisplay()">Update Display</button>
</div>
<div ui-layout-container collapsed="layout.four">
Four
</div>
</div>
<!-- Le javascript -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="application/javascript" src="https://rawgit.com/angular-ui/ui-layout/5e23ee9e1d9a920ad967cdbd791e5ec44a676a0b/src/ui-layout.js"></script>
<script>
var app = angular.module('x', ['ui.layout']);
app.controller('DemoController', function($scope, $timeout) {
$scope.config = {
flow: 'column'
};
$scope.layout = {
one: true,
four: true
};
$scope.toggle = function(which) {
$scope.layout[which] = !$scope.layout[which];
};
$scope.close = function(which) {
$scope.layout[which] = true;
};
$scope.open = function(which) {
$scope.layout[which] = false;
}
$scope.$on('ui.layout.loaded', function(){
$timeout(function(){
$scope.layout.four = true;
});
})
});
</script>
</body>
</html>
/* Styles go here */
# UI.Layout : holy grail demo
Here is a simple demo of my UI.Layout.
[More info](https://github.com/angular-ui/ui-layout/pull/2)