# UCollapse 折叠面板 - [示例](#示例) - [基本用法](#基本用法) - [手风琴模式](#手风琴模式) - [面板嵌套](#面板嵌套) - [使用插槽](#使用插槽) - [填充模式](#填充模式) - [简洁模式](#简洁模式) - [触发方式](#触发方式) - [设置尺寸](#设置尺寸) - [UCollapse API](#ucollapse-api) - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [UCollapseItem API](#ucollapseitem-api) - [Props/Attrs](#propsattrs-2) - [Slots](#slots-2) - [Events](#events-2) **Container** 可以折叠/展开的内容区域。 ## 示例 ### 基本用法 ``` html Content1 Content2 Content3 ``` ### 手风琴模式 ``` html Content1 Content2 Content3 ``` ### 面板嵌套 折叠面板可以进行嵌套。 ``` html Content1 Content1 Content2 Content3 Content3 ``` ### 使用插槽 ``` html 设置 Content1 Content1 Content2 Content3 Content3 ``` ### 填充模式 内容填充 ``` html Content1 Content2 Content3 ``` 无填充 ``` html Content1 Content2 Content3 ``` ### 简洁模式 ``` html 设置 Content1 Content2 Content3 ``` ### 触发方式 #### 整行点击均可触发（默认） Content1 Content2 Content3 #### 仅点击小箭头时触发 Content1 Content2 Content3 ### 设置尺寸 ``` html Content1 Content2 Content3 ``` ## UCollapse API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | appear | string | `[object Object]`
`[object Object]` | `'default'` | | | fill | string | `[object Object]`
`[object Object]`
`[object Object]` | `'head'` | | | accordion | boolean | | `false` | 设置是否每次只展开一个 | | expand-trigger | string | `[object Object]`
`[object Object]` | `'click'` | 展开/折叠操作的触发方式 | | disabled | boolean | | `false` | 置灰显示，且禁止展开/折叠操作 | ### Slots #### (default) 插入``子组件。 ### Events #### @expand 展开此面板时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.itemVM | UCollapseItem | 面板组件 | | $event.preventDefault | Function | 阻止展开/折叠流程 | | senderVM | Vue | 发送事件实例 | #### @collapse 折叠某面板时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.itemVM | UCollapseItem | 面板组件 | | senderVM | Vue | 发送事件实例 | ## UCollapseItem API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | title | string | | | 显示的标题 | | expanded.sync | boolean | | `false` | 展开状态分为“True(展开)/False(折叠)”，默认为“展开” | | disabled | boolean | | `false` | 置灰显示，且禁止展开/折叠操作 | ### Slots #### (default) 插入文本或 HTML。 #### title 自定义标题文本。 #### extra 在右侧可以附加内容。 ### Events #### @expand 展开此面板时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.itemVM | UCollapseItem | 面板组件 | | $event.preventDefault | Function | 阻止展开/折叠流程 | | senderVM | Vue | 发送事件实例 | #### @collapse 折叠某面板时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.itemVM | UCollapseItem | 面板组件 | | senderVM | Vue | 发送事件实例 |