Ziro Components

<ziro-wizard>

<ziro-wizard> allows you to build a bottom navigation based app with ease. By default it takes up the full viewport. The <ziro-wizard> 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.

Close Next →

Panel 2

← Previous Next →

Panel 3

← Previous Finish

HTML

  <div class="well">
      <div class="outer-page">
        <button>Open Wizard</button>
      </div>
      <ziro-wizard>
        <ziro-panel>
            <h3>Panel 1</h3>
            <p>Lorem ipsum...</p>
            <ziro-wizard-nav>
              <span slot="previous">Close</span>
              <span slot="next">Next &rarr;</span>
            </ziro-wizard-nav>
        </ziro-panel>
        <ziro-panel>
            <h3>Panel 2</h3>
            <p>Lorem ipsum...</p>
            <ziro-wizard-nav>
              <span slot="previous">&larr; Previous</span>
              <span slot="next">Next &rarr;</span>
            </ziro-wizard-nav>
        </ziro-panel>
        <ziro-panel>
            <h3>Panel 3</h3>
            <p>Lorem ipsum...</p>
            <ziro-wizard-nav>
              <span slot="previous">&larr; Previous</span>
              <span slot="next">Finish</span>
            </ziro-wizard-nav>
        </ziro-panel>
      </ziro-wizard>
  </div>
</div>

JS

const button = document.querySelector('button');
const wizard = document.querySelector('ziro-wizard');

button.addEventListener('click', () => wizard.start());

CSS

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

.padding {
    padding: 20px;
}