代码演示

基本形式.默认展开并且会折叠其他

<jr-collapse title='标题'>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
</jr-collapse>
<jr-collapse title='标题'>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
</jr-collapse>
<jr-collapse title='标题'>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
</jr-collapse>

可定制宽度,

<jr-collapse title='标题' width='200px'>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
</jr-collapse>
<jr-collapse title='标题' active={false} width='400px' >
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
</jr-collapse>
<jr-collapse title='标题' width='600px'>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
</jr-collapse>

可定制折叠

<jr-collapse title='标题' accordion={false}>
   <div>测试内容，我不会被折叠哦</div>
   <div>测试内容，我不会被折叠哦</div>
   <div>测试内容，我不会被折叠哦</div>
   <div>测试内容，我不会被折叠哦</div>
   <div>测试内容，我不会被折叠哦</div>
</jr-collapse>
<jr-collapse title='标题'>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
</jr-collapse>
<jr-collapse title='标题'>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
   <div>测试内容</div>
</jr-collapse>

API

Classes

JRCollapse

Constants

Component

JRCollapse 折叠文本

JRCollapse

Kind: global class
Extend: Component

new JRCollapse()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.title] string => 标题
[options.data.active] boolean true => 是否默认显示内容区域
[options.data.showIcon] boolean true => 是否显示右侧标签
[options.data.accordion] boolean true => 是否手风琴模式
[options.data.width] string "'100%'" => 宽度
[options.data.class] string => 补充样式

“open 打开面板回调” (事件句柄)

Kind: event emitted by JRCollapse

Param Type
事件句柄 object

Component

JRCollapse 折叠文本

Kind: global constant

面包屑 →