-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathflex-layout.html
68 lines (63 loc) · 2.05 KB
/
flex-layout.html
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
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Flex Layout Demo</title>
<link rel="stylesheet" href="demo.css">
<script src="./theme.js"></script>
<style>
html {
height: 100%;
}
body {
display: flex; flex-direction: column; height: 100%;
margin: 0 2em 0 2em;
}
</style>
</head>
<body>
<h1><a href="index.html">GridChen Index</a> / CSS Flex Layout</h1>
<header>
This is a vertical flow header taking exactly the size of its content.
Observe how the grid takes all available space between header and footer on both <em>textarea</em> and
<em>window</em> resize.
There shall not be a vertical scrollbar, so styles elements like so
<textarea id="rect" rows="4" cols="60" style="display: block; background-color: red;">
html { height: 100%; }
body { display: flex; flex-direction: column; height: 100%; margin: 0 2em 0 2em; }
</textarea>
</header>
<grid-chen style="flex: 1; margin-left: 2em;"></grid-chen>
<footer>
This is a vertical flow footer.
</footer>
</body>
<script type="module">
import "./gridchen/webcomponent.js"
import {createView} from "./gridchen/matrixview.js"
import {createTransactionManager} from "./gridchen/utils.js";
const schema = {
title: 'DOMRect Properties', type: 'array',
items: {
type: 'array',
items: [
{title: 'Property', type: 'string', width: 200},
{title: 'Value', type: 'number', width: 200}
]
}
};
const rows = [];
const tm = createTransactionManager();
const grid = document.querySelector('grid-chen').resetFromView(createView(schema, rows), tm);
function clientRectPropertiestoMatrix() {
const rect = grid.getBoundingClientRect();
rows.length = 0;
for (let key in rect) {
if (typeof rect[key] === 'number') {
rows.push([key, rect[key]]);
}
}
}
grid._onresize = clientRectPropertiestoMatrix;
</script>
</html>