spz-sidebar

<button type="button" @tap="sidebar.open">Open sidebar</button>

<spz-sidebar id="sidebar" layout="nodisplay" side="left" has-mask>
  <button type="button" @tap="sidebar.close">Close sidebar</button>
  <ul>
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
  </ul>
</spz-sidebar>

Using a few animations to open the element. It has the following values:

• top: Be opened in fly-from-top animation.
• left: Be opened in fly-from-left animation.
• right: Be opened in fly-from-right animation.
• bottom: Be opened in fly-from-bottom animation.

If this attribute is present, the element will has a mask. The element will be closed when the user clicks the mask.

A string of the HTML DOM ID. It specifies which element the mask is placed under.

To open the element. No parameter required.

close([immediate=<Boolean>])

To close the element.

• immediate: Indicates whether to close the element immediately.

To toggle open or close the element. No parameter required.

Be triggered when the element is opening.

Be triggered when the element is closing.

<div id="text">Show sidebar</div>

<spz-sidebar
  layout="nodisplay"
  side="left"
  @sidebarOpen="text.toggleClass(class='hidden', force=false);"
  @sidebarClose="text.toggleClass(class='hidden', force=true);"
>
  <!-- ... -->
</spz-sidebar>