polymer-workbench/grid.html at master · morethanreal/polymer-workbench · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html>
<head>
	<link href="../polymer-elements/polymer-grid-layout/polymer-grid-layout.html" rel="import">
	<link href="../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html" rel="import">
	<script src="../polymer/polymer.js"></script>
	<link rel="stylesheet" href="../polymer-ui-elements/basic.css">
	<style>
		html {
			height: 100%;
		}
		grid-test {
			display: block;
			height: 100%;
		}
	</style>
</head>
<body class="polymer-ui-body-text polymer-ui-full-bleed polymer-ui-light-bg">
	<polymer-element name="grid-test">
		<template>
			<style>
				.left {
					/*width: 320px;*/
					background-color: red;
					height: 100%;
				}
				.right {
					background-color: green;
					height: 100%;
				}
			</style>
			<polymer-grid-layout id="grid"></polymer-grid-layout>
			<polymer-ui-toolbar></polymer-ui-toolbar>
			<div class="left"></div>
			<div class="right"></div>
		</template>
		<script>
			Polymer('grid-test', {
				ready: function() {
					// this.$.grid.layout = [
					// 	[1, 1, 1],
					// 	[2, 3, 3],
					// 	[2, 3, 3]
					// ];
					this.$.grid.layout = [
						[1, 1, 1, 1],
						[2, 2, 3, 3],
						[2, 2, 3, 3]
					];
				}
			});
		</script>
	</polymer-element>
	<grid-test></grid-test>
</html>