-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
49 lines (49 loc) · 1.56 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 lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>zephjs-router</title>
<script src="../../zephjs-router.js" type="module"></script>
<style>
body {
font-size: 24px;
}
</style>
</head>
<body>
<h2>Basic Router Example</h2>
<div>This basic router example uses hash based url routing.</div>
<br/>
<h3>Example</h3>
<div style="margin-bottom: 20px;">
Click on one of the following to change the URL Hash. The content below should change accordingly.
<br/>
Set hash to <a href="#abc">#abc</a> or <a href="#def">#def</a> or <a href="#ghi">#ghi</a> or <a href="#jkl">#jkl</a>.
</div>
<zephjs-router>
<zephjs-route match="abc" against="hash">
<div style="border: 5px solid red; font-size: 36px; font-weight: bold; border-radius: 15px;">
This is the ABC hash route.
</div>
</zephjs-route>
<zephjs-route match="def" against="hash">
<div style="border: 5px solid green; font-size: 36px; font-weight: bold; border-radius: 15px;">
This is the DEF hash route.
</div>
</zephjs-route>
<zephjs-route match="ghi" against="hash" default>
<div style="border: 5px solid blue; font-size: 36px; font-weight: bold; border-radius: 15px;">
This is the GHI hash route.
</div>
</zephjs-route>
<zephjs-route match="jkl" against="hash">
<div style="border: 5px solid yellow; font-size: 36px; font-weight: bold; border-radius: 15px;">
This is the JKL hash route.
</div>
</zephjs-route>
<div>
You should never see this content.
</div>
</zephjs-router>
</body>
</html>