Collapse 折叠面板

折叠面板组件，用于内容折叠展开。

基础用法

<div id="demo-collapse"></div>

<script>
  const collapse = new SaCollapse('#demo-collapse', {
    items: [
      {
        name: '1',
        title: '一致性 Consistency',
        content: '与现实生活一致：与现实生活的流程、逻辑保持一致...'
      },
      {
        name: '2',
        title: '反馈 Feedback',
        content: '控制反馈：通过界面样式和交互动效让用户可以清晰的感知...'
      }
    ],
    activeNames: ['1'],
    onChange: (activeNames) => {
      console.log('激活的面板:', activeNames);
    }
  });
</script>

加载 SanoUI 组件中...

手风琴模式

通过 accordion: true 启用手风琴模式，同时只能展开一个面板。

<div id="demo-collapse-accordion"></div>

<script>
  const collapse = new SaCollapse('#demo-collapse-accordion', {
    accordion: true, // 手风琴模式
    items: [
      {
        name: '1',
        title: '一致性 Consistency',
        content: '与现实生活一致：与现实生活的流程、逻辑保持一致...'
      },
      {
        name: '2',
        title: '反馈 Feedback',
        content: '控制反馈：通过界面样式和交互动效让用户可以清晰的感知...'
      }
    ],
    activeNames: ['1']
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaCollapseOptions	{}

配置选项

参数	说明	类型	可选值	默认值
items	折叠面板项数组	Array<CollapseItem>	-	[]
activeNames	当前激活的面板名称数组	Array<string>	-	[]
accordion	是否开启手风琴模式	boolean	-	false
onChange	面板切换回调	function(activeNames: string[])	-	-

CollapseItem 配置

参数	说明	类型	默认值
name	面板唯一标识	string	-
title	面板标题	string	-
content	面板内容	string	-

方法

方法名	说明	参数	返回值
setActiveNames	设置激活的面板	activeNames: string[]	void
getActiveNames	获取当前激活的面板	-	string[]
destroy	销毁实例	-	void

示例代码

手动创建实例

const collapse = new SaCollapse('#my-collapse', {
  items: [
    {
      name: '1',
      title: '面板一',
      content: '这是面板一的内容'
    },
    {
      name: '2',
      title: '面板二',
      content: '这是面板二的内容'
    },
    {
      name: '3',
      title: '面板三',
      content: '这是面板三的内容'
    }
  ],
  activeNames: ['1'],
  accordion: false,
  onChange: (activeNames) => {
    console.log('当前激活的面板:', activeNames);
  }
});

// 设置激活的面板
collapse.setActiveNames(['2']);

// 获取当前激活的面板
const activeNames = collapse.getActiveNames();

手风琴模式

const collapse = new SaCollapse('#my-collapse', {
  accordion: true, // 手风琴模式
  items: [
    { name: '1', title: '面板一', content: '内容一' },
    { name: '2', title: '面板二', content: '内容二' },
    { name: '3', title: '面板三', content: '内容三' }
  ],
  activeNames: ['1']
});

实际使用场景

场景 1：常见问题 FAQ

使用折叠面板展示常见问题。

<div id="faq-collapse"></div>

<script>
  const collapse = new SaCollapse('#faq-collapse', {
    accordion: true,
    items: [
      {
        name: '1',
        title: '如何注册账号？',
        content: '点击页面右上角的"注册"按钮，填写相关信息即可完成注册。'
      },
      {
        name: '2',
        title: '如何找回密码？',
        content: '在登录页面点击"忘记密码"，按照提示操作即可找回密码。'
      },
      {
        name: '3',
        title: '如何联系客服？',
        content: '您可以通过在线客服、电话或邮件的方式联系我们。'
      },
      {
        name: '4',
        title: '支持哪些支付方式？',
        content: '我们支持支付宝、微信支付、银行卡等多种支付方式。'
      }
    ],
    activeNames: [],
    onChange: (activeNames) => {
      console.log('当前展开的问题:', activeNames);
    }
  });
</script>

加载 SanoUI 组件中...

场景 2：设置面板

使用折叠面板组织设置项。

<div id="settings-collapse"></div>

<script>
  const collapse = new SaCollapse('#settings-collapse', {
    accordion: false,
    items: [
      {
        name: 'account',
        title: '账户设置',
        content: `
          <div style="padding: 1rem;">
            <div class="sa-form-item" style="margin-bottom: 1rem;">
              <label>用户名</label>
              <div class="sa-input" data-placeholder="请输入用户名" style="width: 100%;"></div>
            </div>
            <div class="sa-form-item">
              <label>邮箱</label>
              <div class="sa-input" data-type="email" data-placeholder="请输入邮箱" style="width: 100%;"></div>
            </div>
          </div>
        `
      },
      {
        name: 'notification',
        title: '通知设置',
        content: `
          <div style="padding: 1rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
              <span>邮件通知</span>
              <div class="sa-switch" data-switch data-checked="true"></div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <span>短信通知</span>
              <div class="sa-switch" data-switch></div>
            </div>
          </div>
        `
      },
      {
        name: 'privacy',
        title: '隐私设置',
        content: `
          <div style="padding: 1rem;">
            <p>隐私设置内容</p>
          </div>
        `
      }
    ],
    activeNames: ['account']
  });
  
  SA.init('body');
</script>

加载 SanoUI 组件中...