pip-webui
Version:
HTML5 UI for LOB applications
83 lines (64 loc) • 3.19 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Tile Groups Layout</title>
<link rel="stylesheet" href="../../lib/pip-webui-lib.css"/>
<link rel="stylesheet" href="../../lib/pip-webui-css.css"/>
<link rel="stylesheet" href="../../dist/pip-webui-layouts.css"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<script src="../../lib/pip-webui-lib.js"></script>
<script src="../../dist/pip-webui-layouts.js"></script>
<script src="index.js"></script>
</head>
<body ng-app="app" ng-controller="AppController" md-theme="{{ $theme || 'blue' }}" class="{{ $theme }} pip-main layout-column">
<pip-main>
<md-toolbar>
<div class="md-toolbar-tools">
<h2><span>Tile Groups Layout</span></h2>
</div>
</md-toolbar>
<pip-main-body>
<md-toolbar class="md-primary pip-body-nav">
<md-tabs md-selected="0" xmd-stretch-tabs="auto">
<md-tab label="One"></md-tab>
<md-tab label="Two"></md-tab>
<md-tab label="Three"></md-tab>
<md-tab label="Four"></md-tab>
</md-tabs>
</md-toolbar>
<pip-simple>
<div class="bg-red p16 fg-white">Group #1</div>
<pip-tiles column-width="440">
<div class="masonry-brick pip-tile bg-grey w440-flex">
<h3 class="tile-sm">This is a special tile</h3>
</div>
<div class="masonry-brick pip-tile {{tile.color}} w440-flex" ng-repeat="tile in tiles">
<h3 class="{{tile.size}}">{{tile.name}}</h3>
</div>
</pip-tiles>
<div class="bg-green p16 fg-white">Group #2 with small tiles</div>
<pip-tiles column-width="180">
<div class="masonry-brick pip-tile bg-grey">
<h3 class="tile-sm">This is a special tile</h3>
</div>
<div class="masonry-brick pip-tile {{tile.color}}" ng-repeat="tile in tiles">
<h3 class="{{tile.size}}">{{tile.name}}</h3>
</div>
</pip-tiles>
<div class="bg-yellow p16">Group #3</div>
<pip-tiles column-width="440">
<div class="masonry-brick pip-tile bg-grey w440-flex">
<h3 class="tile-sm">This is a special tile</h3>
</div>
<div class="masonry-brick pip-tile {{tile.color}} w440-flex" ng-repeat="tile in tiles">
<h3 class="{{tile.size}}">{{tile.name}}</h3>
</div>
</pip-tiles>
</pip-simple>
</pip-main-body>
</pip-main>
</body>
</html>