-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
49 lines (47 loc) · 11.9 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<script src="x-block.js"></script>
</head>
<body style="border: 5px solid;margin: 10px;padding: 10px;">
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore quidem corrupti culpa praesentium odit doloribus saepe debitis iusto sint officia dolorum deserunt consequatur similique laboriosam at voluptas tenetur, quis vero.
</div>
<div style="height: 100px;">
<x-block debug>Inventore quidem corrupti</x-block>
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate assumenda distinctio ducimus fuga placeat aperiam itaque, veritatis tenetur laudantium in mollitia dolore aliquid. Odit delectus temporibus voluptate itaque! Corporis, perferendis!
Animi voluptates aliquam, vero nemo iusto dolorum assumenda porro ea aspernatur esse quis quam perferendis voluptatem sint dolore, laboriosam amet! Veniam velit totam tenetur vel vitae consectetur quasi pariatur quo.
Nam alias sequi labore doloribus tempora tenetur ipsum placeat non, atque commodi incidunt facilis corrupti autem odit adipisci expedita quo necessitatibus. Beatae cum nihil magni facilis illum temporibus, architecto ut.
Voluptatum, velit eos? Neque velit delectus dignissimos accusamus aspernatur nihil dolorum in illum, officiis tempora ipsum vitae! Ducimus officia molestias asperiores quidem magnam, id fugiat! Harum doloribus dolores repellat eaque!
Doloremque vel, nihil placeat quos aut sit ea, numquam sint quo odit similique fugiat eaque repudiandae, tempora eius culpa voluptate! Ipsum reprehenderit fugit aperiam quibusdam dolores soluta, provident doloremque nulla.
</div>
<x-block direction="vertical" size="fill,fillToScreen" dock="top,left" debug style="margin: 10px; padding:10px">
<x-block dock="left,center" size="fill,10rem">
<h1>Header</h1>
</x-block>
<x-block direction="horizontal">
<x-block dock="left,top" size="200px" scrollableY direction="vertical" style="padding: 2rem">
<h1>Menu</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</x-block>
<x-block direction="vertical" dock="top,left" scrollableY style="padding: 10px">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae odio, voluptates adipisci id sapiente vitae voluptatum dolorem hic. Omnis laboriosam dignissimos mollitia rerum aut necessitatibus! Rerum atque fugit fuga!
</x-block>
</x-block>
<x-block size="fill,100px">
Footer
</x-block>
</x-block>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus soluta maiores ipsum ad, quidem, tempore obcaecati quae assumenda expedita aspernatur atque praesentium dicta totam laboriosam velit. Error eos voluptatem explicabo.
Reprehenderit quaerat rerum aspernatur, repellat, vel, nemo excepturi voluptates laudantium doloribus iusto hic cumque minus voluptatem obcaecati voluptate saepe temporibus sint. In recusandae ratione distinctio necessitatibus animi fuga dolore ad.
Vel molestias aliquam nisi soluta ullam debitis officiis libero possimus temporibus maxime. Quisquam a vitae reiciendis velit provident voluptate voluptatibus quas, iusto repudiandae? Saepe recusandae incidunt maiores iusto consectetur non!
</div>
</body>
</html>