Cuttlefish Docs
  • 简体中文

    • spz-gallery

    何时使用

    spz-gallery 创建一个可展开画廊，其中一个项目处于展开状态，其余项目处于折叠状态。项目可以按行或列排列。

    适用场景：

    • 展示一组项目，其中一个突出显示，其余最小化
    • 构建手风琴式图片画廊
    • 创建前后对比布局

    支持布局

    • container

    代码演示

    基本行模式画廊

    <spz-gallery layout="container" mode="row" collapse-rate="0.2" min-collapse="30">
  <div>项目 1 内容</div>
  <div>项目 2 内容</div>
  <div>项目 3 内容</div>
</spz-gallery>

    列模式并指定初始索引

    <spz-gallery layout="container" mode="column" initial-index="1" collapse-rate="0.15">
  <div>面板 A</div>
  <div>面板 B（初始展开）</div>
  <div>面板 C</div>
</spz-gallery>

    通过 action 展开

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

    属性

    属性名说明类型是否必需
    initial-index初始展开项目的索引。默认：0number否
    mode布局模式：row（水平）或 column（垂直）。默认：row。支持媒体查询语法实现响应式切换string否
    collapse-rate折叠项目尺寸与完整尺寸的比例（0 到 1 之间的小数）。默认：0.2。支持媒体查询语法number否
    min-collapse最小折叠尺寸（像素）。默认：20。支持媒体查询语法number否
    dir文本方向。未设置时从文档继承。用于 RTL 支持string否

    状态属性

    属性名说明
    expanded初始展开动画完成后设置
    completed画廊完全初始化后设置

    Actions

    expand

    展开指定索引的项目。

    参数：

    • index (number)：要展开的项目的从零开始的索引

    示例：

    <button @tap="my-gallery.expand(index=1)">展开第二个项目</button>

    注意事项

    • 至少需要 2 个子元素。
    • 该组件不派发自定义事件。
    • 响应式属性（mode、collapse-rate、min-collapse）接受媒体查询语法，支持断点值。