Ziro Components

Basic Example

Call the .open() method of <ziro-slide-page> in order to open the page.

Make sure that the container is position relative and has no padding.

HTML

<div class="well">
    <div class="padding">
        <button id="open-btn">Open Settings</button>
    </div>
    <ziro-slide-page id="page-to-open">
        <ziro-closer>&larr; Close</ziro-closer>
        <h2>Settings</h2>
        <p>Lorem ipsum...</p>
    </ziro-slide-page>
</div>

JS

document.getElementById('open-btn').addEventListener('click', () => {
    document.getElementById('page-to-open').open();
});

CSS

.well {
    position: relative;
    width: 100%;
    height: 400px;
    border: 1px solid #ccc;
    background-color: #ddd;
    overflow: hidden;
}

.padding {
    padding: 20px;
}

Navigation Example

The path attribute will connect the <ziro-slide-page> to the URL. If the URL path matches the provided path, the page will be opened.

HTML

<ziro-slide-page path="/ziro-slide-page.html">
    <ziro-closer>&larr; Close</ziro-closer>
    <h2>Settings</h2>
    <p>Lorem ipsum...</p>
</ziro-slide-page>

Browser History Example

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

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

HTML

<ziro-slide-page history path="/ziro-slide-page/example.html">
    <ziro-closer>&larr; Close</ziro-closer>
    <h2>Settings</h2>
    <p>Lorem ipsum...</p>
</ziro-slide-page>