zephjs-router
Version:
A simple router element for targeting portions of your webpage at specific content based on the URL.
50 lines (49 loc) • 1.6 kB
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>