折叠面板

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

如何使用

引入

import 'blitz-ui-demo/dist/index.css'
import { Collapse } from 'blitz-ui-demo'
import { CollapseItem } from 'blitz-ui-demo'

export default {
    components:{
        'bl-collapse':Collapse,
        'bl-collapse-item':CollapseItem
    }
}

---

基础样式

标题1

标题2

标题3

通过 :selected.sync 控制展开的面板列表，selected为数组格式。

<div class="wrapper">
  <bl-collapse :selected.sync="selected">
    <bl-collapse-item title="标题1" name="1">谢谢您使用BlitzUI</bl-collapse-item>
    <bl-collapse-item title="标题2" name="2">谢谢您使用BlitzUI</bl-collapse-item>
    <bl-collapse-item title="标题3" name="3">谢谢您使用BlitzUI</bl-collapse-item>
  </bl-collapse>
</div>


export default {
  data(){
  return{
    selected:['1']
    }
  }
}

---

设置单页打开

标题1

标题2

标题3

通过 :single="true" 来控制展开的面板列表只能为一页，选择某页将会关闭其他页。

<div class="wrapper">
  <bl-collapse :selected.sync="selected" :single="true">
    <bl-collapse-item title="标题1" name="1">谢谢您使用BlitzUI</bl-collapse-item>
    <bl-collapse-item title="标题2" name="2">谢谢您使用BlitzUI</bl-collapse-item>
    <bl-collapse-item title="标题3" name="3">谢谢您使用BlitzUI</bl-collapse-item>
  </bl-collapse>
</div>


export default {
  data(){
  return{
    selected:['1']
    }
  }
}

---

Collapse Attributes

参数	说明	类型	可选值	默认值
selected	绑定值，默认打开页的 name	Array	—	—
single	设置单页打开	Boolean	—	false

---

Collapse-item Attributes

参数	说明	类型	可选值	默认值
title	页标题名	String	—	—
name	与页绑定值对应的标识符，表示页的别名	String	—	—