spz-sidebar#

#When to Use

When an additional panel is needed for further operations without leaving the current page, this panel will open when needed. For example: Quick add-to-cart popup.

#Code Demonstration

#Basic Usage

Basic drawer, click the trigger button to slide the drawer out from the left, click the mask area to close.

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

<spz-sidebar layout="nodisplay" side="left" id="sidebar">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      <h3>Basic Drawer</h3>
      <button @tap="sidebar.close">Close</button>
    </div>
    <div>Some contents...</div>
    <div>Some contents...</div>
    <div>Some contents...</div>
  </div>
</spz-sidebar>

#Properties

#Methods

#open

Open the drawer, no parameters needed.

#close

Close the drawer, no parameters needed.

#AI Summary (LLM Ready)

• Component ID: spz-sidebar
• One-line purpose: A floating layer panel that slides out from the edge of the screen.
• Detected attribute rows: 0
• Detected method subsections: 2
• Detected event subsections: 0
• Top attribute names: none (needs manual completion)
• Top method names: open, close
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/