HIPS-UNI-UI

# Collapse 折叠面板

# 使用指南

import Collapse from '@hips/uni-ui/lib/collapse';
import CollapseItem from '@hips/uni-ui/lib/collapse-item';

export default {
  components: {
    'hips-collapse': Collapse,
    'hips-collapse-item': CollapseItem,
  },
};
1
2
3
4
5
6
7
8
9

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-collapse v-model="activeNames">
  <hips-collapse-item title="折叠面板" name="1">
    面板内容...
  </hips-collapse-item>
</hips-collapse>
1
2
3
4
5



 




export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};
1
2
3
4
5
6
7

# 手风琴

<hips-collapse v-model="activeName" accordion>
  <hips-collapse-item title="折叠面板1" name="1">
    面板内容...
  </hips-collapse-item>
  <hips-collapse-item title="折叠面板2" name="2">
    面板内容...
  </hips-collapse-item>
</hips-collapse>
1
2
3
4
5
6
7
8



 




export default {
  data() {
    return {
      activeName: '1',
    };
  },
};
1
2
3
4
5
6
7

注意

v-model 绑定的对象，当是普通模式时，是一个数字或者字符串数组，当是手风琴模式时，是一个纯数字或者字符串。

# 自定义标题内容

<hips-collapse v-model="activeNames">
  <hips-collapse-item name="1">
    <div slot="title">折叠面板1<hips-icon name="question" /></div>
    面板内容...
  </hips-collapse-item>
  <hips-collapse-item title="面板标题" name="2">
    面板内容...
  </hips-collapse-item>
</hips-collapse>
1
2
3
4
5
6
7
8
9

# Collapse API

参数 说明 类型 默认值
v-model 当前展开面板的 name Array | String | Number -
accordion 是否开启手风琴模式 Boolean false

# Collapse Event

事件名 说明 参数 类型
change 切换面板时触发 activeNames string | array

# CollapseItem API

参数 说明 类型 默认值
name 面板唯一标识符，默认为索引值 String | Number index (数字)
disabled 是否禁用面板 Boolean false
icon 左侧图标，可选值见 Icon 组件 String -
title 左侧标题 String | Number -
show-animation 是否有展开关闭动画 Boolean true

# CollapseItem Slot

名称 说明
- 面板内容
icon 自定义icon
title 自定义title
right-icon 自定义右侧按钮，默认是arrow

# 样式变量

变量名 说明 默认值
collapse-border-color 边框颜色 #EEEEEE
collapse-item-title-color item 标题颜色 #6D7A80
collapse-item-title-font-size item 标题文字大小 32rpx
collapse-item-title-bg-color item 标题背景颜色 white
collapse-item-title-height item 标题高度 100rpx
collapse-item-title-padding-right item 标题距离右边 padding 30rpx
collapse-item-left-icon-size item 顶部左侧图标容器高度 60rpx
collapse-item-left-icon-padding-right item 顶部左侧图标容器右边 padding 20rpx
collapse-item-content-bg-color item 内容背景颜色 white

注意

Badge 徽章