Flyout-WebComponent/test.html at master · EnzeyNet/Flyout-WebComponent · 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
56
57
58
59
60
61
62
63
64
65
66
67
<html>
	<head>
		<style>
			.shim {
				z-index: -1;
			}
			html, body {
				height: 1000px;
				width: 2000px;
			}
			.test1 {
				position: absolute;
				top: 200px;
				left: 300px;
			}
			.test2 {
				position: absolute;
				top: 200px;
				left: 600px;
			}
			.flyoutCont {
				width: 30px;
				height: 20px;
				background-color: lightblue;
			}
			.flyoutCont2 {
				width: 50px;
				height: 30px;
				background-color: lightgreen;
			}
			.flyoutCont3 {
				width: 50px;
				height: 60px;
				background-color: cyan;
			}
		</style>
		<script src="dist/Flyout-WebComponent.allDeps.js"></script>
	</head>
	<body>
		<div class="test1">
			<button>
				<span>TEST!</span>
				<fly-out flyout-on="hover" align-my="top left" align-to="bottom left">
					<div class="flyoutCont">
					</div>
				</fly-out>
			</button>
		</div>
		<div class="test2">
			<button>
				<span>TEST!</span>
				<fly-out flyout-on="hover" align-my="top right" align-to="bottom right">
					<div class="flyoutCont">
						<fly-out flyout-on="hover" align-my="top left" align-to="bottom left">
							<div class="flyoutCont2">
								<fly-out flyout-on="hover" align-my="bottom left" align-to="bottom right">
									<div class="flyoutCont3">
									</div>
								</fly-out>
							</div>
						</fly-out>
					</div>
				</fly-out>
			</button>
		</div>
	</body>
</html>