Ziro Components

<ziro-screen>

<ziro-screen> allows you to build a bottom navigation based app with ease. By default it takes up the full viewport. The <ziro-screen> can be resized in order to use it on a subsection of the viewport.

The panels will only render their contents when active. The 'next' panels is activated when the transition begins and the 'previous' panel is deactivated when the transition ends.

Basic Example

The transition speed can be configued with the 'speed' attribute of the <ziro-panel-set> element. The unit is provided in milliseconds.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2

Panel 3

HTML

<ziro-screen>
    <ziro-panel-set>
        <ziro-panel>
            <h3>Panel 1</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
        <ziro-panel>
            <h3>Panel 2</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
        <ziro-panel>
            <h3>Panel 3</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
    </ziro-panel-set>
    <ziro-nav>
        <ziro-nav-item>A</ziro-nav-item>
        <ziro-nav-item>B</ziro-nav-item>
        <ziro-nav-item>C</ziro-nav-item>
    </ziro-nav>
</ziro-screen>

Defaul Panel Example

The default active panel can be set to something other than the first panel.

Panel 1

Panel 2

Panel 3

HTML

<ziro-screen>
    <ziro-panel-set>
        <ziro-panel>
            <h3>Panel 1</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
        <ziro-panel active>
            <h3>Panel 2</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
        <ziro-panel>
            <h3>Panel 3</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
    </ziro-panel-set>
    <ziro-nav>
        <ziro-nav-item>A</ziro-nav-item>
        <ziro-nav-item selected>B</ziro-nav-item>
        <ziro-nav-item>C</ziro-nav-item>
    </ziro-nav>
</ziro-screen>

Navigation Example

The panels can be given a path attribute. If the current URL path starts with the provided path, that screen will be selected by default. The provided path needs to match a full path segment, including extensions.

Panel 1

Panel 2

Panel 3

HTML

<ziro-screen>
    <ziro-panel-set>
        <ziro-panel path="/">
            <h3>Panel 1</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
        <ziro-panel path="/page2">
            <h3>Panel 2</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
        <ziro-panel path="/ziro-screen.html">
            <h3>Panel 3</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
    </ziro-panel-set>
    <ziro-nav>
        <ziro-nav-item>A</ziro-nav-item>
        <ziro-nav-item>B</ziro-nav-item>
        <ziro-nav-item>C</ziro-nav-item>
    </ziro-nav>
</ziro-screen>

Browser History Example

Setting the 'history' attributes on the <ziro-screen> element integrates the component with the browser history. This needs to be used in conjunction with the path attributes.

Try clicking on the navigation buttons and watch the url in the browser. Then, hit the back and forward buttons.

Panel 1

Panel 2

Panel 3

HTML

<ziro-screen history>
    <ziro-panel-set>
        <ziro-panel path="/">
            <h3>Panel 1</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
        <ziro-panel path="/page2">
            <h3>Panel 2</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
        <ziro-panel path="/ziro-screen.html">
            <h3>Panel 3</h3>
            <p>Lorem ipsum...</p>
        </ziro-panel>
    </ziro-panel-set>
    <ziro-nav>
        <ziro-nav-item>A</ziro-nav-item>
        <ziro-nav-item>B</ziro-nav-item>
        <ziro-nav-item>C</ziro-nav-item>
    </ziro-nav>
</ziro-screen>