spz-dropdown#

#When to Use

When there are too many action commands on a page, this component can be used to organize action elements. Clicking or moving into the trigger point will reveal a dropdown list. You can make selections from the list and execute the corresponding commands.

• Used to gather a group of command actions.

#Code Demonstration

#Basic Usage

The most basic usage, use the open method to open the dropdown list, clicking anywhere on the screen outside of the dropdown list will automatically hide it.

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

<spz-dropdown id="dropdown" layout="nodisplay" overlay-style="top: 8px;">
  <ul>
    <li>1st item</li>
    <li>2nd item</li>
    <li>3rd item</li>
  </ul>
</spz-dropdown>

#Attributes

#Methods

#open

Opens the dropdown list, no parameters needed.

#close

Hides the dropdown list, no parameters needed.

#Events

dropdownOpen

This event is automatically triggered when the dropdown list is opened.

dropdownClose

This event is automatically triggered when the dropdown list is hidden.

#AI Summary (LLM Ready)

• Component ID: spz-dropdown
• One-line purpose: A list that pops down.
• Detected attribute rows: 2
• Detected method subsections: 2
• Detected event subsections: 2
• Top attribute names: placement, overlay-style
• Top method names: open, close
• Top event names: dropdownOpen, dropdownClose
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/