Commit de3befd7 authored by Clément's avatar Clément

update: add sub-menu example

parent b0f6d4c4
Pipeline #2065 passed with stage
in 27 seconds
......@@ -20,7 +20,7 @@ More details on each component in the following section.
## Components documentation
### sib-router  &  sib-route
### sib-router & sib-route
Displays a menu and handle the navigation for you.
......@@ -40,7 +40,7 @@ Displays a menu and handle the navigation for you.
`<sib-router>` accepts the following attributes:
- **default-route**: The `name` attribute of the default `<sib-route>` displayed.
- **route-prefix**: If you app is not run from the root of your domain name, for instance `www.your-domain.com/some-uri`, you should set `route-prefix` to "some-uri".
- **route-prefix**: If you app is not run from the root of your domain name, for instance `www.your-domain.com/some-uri`, you should set `route-prefix` to `"some-uri"`.
- **use-hash**: If you can't rewrite the URLs on your server, you might want to set this attribute to use `location.hash` instead of `location.pathname` as URLs.
`<sib-route>` accepts the following attributes:
......
......@@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SIB test: sib-router</title>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js"></script>
<script type="module" src="../src/index.js"></script>
<style>
sib-router {
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SIB test: sib-router</title>
<script type="module" src="../src/index.js"></script>
<style>
sib-router {
display: block;
text-align: center;
}
sib-route,
sib-link {
display: inline-block;
padding: 0.5em;
margin: 0.2em;
background-color: #ccc;
cursor: pointer;
}
[active] {
background-color: #afa;
}
</style>
</head>
<body>
<h1>Musical Instruments</h1>
<sib-router default-route="keyboard">
<sib-route name="keyboard">Keyboard</sib-route>
<sib-route name="string">String</sib-route>
<sib-route name="brass">Brass</sib-route>
</sib-router>
<div id="keyboard" hidden>
<sib-router default-route="piano">
<sib-route name="piano">Piano</sib-route>
<sib-route name="harpsichord">Harpsichord</sib-route>
<sib-route name="organ">Organ</sib-route>
</sib-router>
<div hidden id="piano"><h2>Piano</h2></div>
<div hidden id="harpsichord"><h2>Harpsichord</h2></div>
<div hidden id="organ"><h2>Organ</h2></div>
</div>
<div id="string" hidden>
<sib-router default-route="violin">
<sib-route name="violin">Violin</sib-route>
<sib-route name="contrabass">Contrabass</sib-route>
<sib-route name="guitar">Guitar</sib-route>
<sib-route name="ukulele">Ukulele</sib-route>
</sib-router>
<div hidden id="violin"><h2>Violin</h2></div>
<div hidden id="contrabass"><h2>Contrabass</h2></div>
<div hidden id="guitar"><h2>Guitar</h2></div>
<div hidden id="ukulele"><h2>Ukulele</h2></div>
</div>
<div id="brass" hidden>
<sib-router default-route="trumpet">
<sib-route name="trumpet">Trumpet</sib-route>
<sib-route name="trombone">Trombone</sib-route>
<sib-route name="tuba">Tuba</sib-route>
</sib-router>
<div hidden id="trumpet"><h2>Trumpet</h2></div>
<div hidden id="trombone"><h2>Trombone</h2></div>
<div hidden id="tuba"><h2>Tuba</h2></div>
</div>
</body>
</html>
......@@ -22,6 +22,7 @@
<h3>Examples</h3>
<ul>
<li><a href="examples/basic.html">basic</a></li>
<li><a href="examples/sub-menu.html">sub-menu</a></li>
</ul>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment