Skip to content

S
SiB Router
Commit fb63e0b7 authored by Clément's avatar Clément
Browse files
Options

Merge branch 'sub-menu' into 'master' 

update: add sub-menu example

See merge request !4
parents b0f6d4c4 de3befd7
Pipeline #2069 passed with stage
    in 27 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 74 additions and 3 deletions
    README.md
    View file @ fb63e0b7
    ......@@ -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:
    ......
    examples/basic.html
    View file @ fb63e0b7
    ......@@ -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 {
    ......
    examples/sub-menu.html 0 → 100644
    View file @ fb63e0b7
    <!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>
    index.html
    View file @ fb63e0b7
    ......@@ -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