spz-gallery#

#When to use

spz-gallery creates an expandable gallery where one item is expanded while the others are collapsed. Items can be arranged in a row or column layout.

Use it when you need to:

• Display a set of items where one is prominent and the rest are minimized
• Build accordion-style image galleries
• Create before/after comparison layouts

#Supported layout

• container

#Example

#Basic row gallery

<spz-gallery layout="container" mode="row" collapse-rate="0.2" min-collapse="30">
  <div>Item 1 content</div>
  <div>Item 2 content</div>
  <div>Item 3 content</div>
</spz-gallery>

#Column mode with initial index

<spz-gallery layout="container" mode="column" initial-index="1" collapse-rate="0.15">
  <div>Panel A</div>
  <div>Panel B (initially expanded)</div>
  <div>Panel C</div>
</spz-gallery>

#Expand via action

<spz-gallery id="my-gallery" layout="container" mode="row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</spz-gallery>
<button @tap="my-gallery.expand(index=2)">Expand Item 3</button>

#Attributes

#Status attributes

#Actions

#expand

Expand the item at the specified index.

Parameters:

• index (number): The zero-based index of the item to expand

Example:

<button @tap="my-gallery.expand(index=1)">Expand second item</button>

#Notes

• Requires at least 2 child elements.
• This component does not emit custom events.
• Responsive attributes (mode, collapse-rate, min-collapse) accept media query syntax for breakpoint-based values.