Collapse 折叠面板

使用

import { KCollapse } from "@ksware/ksw-ux";

通过折叠面板收纳内容区域

基础用法

可同时展开多个面板，面板之间不影响

手风琴效果

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

自定义图标

除了使用 icon 属性外，您还可以自定义面板项目图标，从而添加自定义内容。

轮廓线

通过 is-outline 属性设置是否显示轮廓线，默认显示，可以设置该属性为 false 隐藏轮廓线。

使用状态

通过 KCollapse 的 use-status 属性以及 KCollapseItem 的 status 属性设置面板的状态，status 属性可选值为 primary、success、warning 、danger、info。

Collapse API

Collapse Props

参数名	描述	类型	默认值
model-value / v-model	当前活动面板，在手风琴模式下其类型是 string，在其他模式下是 array	string | array	[]
accordion	是否开启手风琴模式	boolean	false
block	是否使用块级样式	boolean	false
is-outline	是否显示轮廓线条	boolean	true
use-ant-style	是否使用 Ant 风格样式	boolean	false
use-status	是否使用有状态的面板	boolean	false

Collapse Events

事件名	描述	类型
change	切换当前活动面板时触发	Function

Collapse Slots

插槽名	描述	参数
default	默认插槽内容	-

CollapseItem API

CollapseItem Props

参数名	描述	类型	默认值
name	当前活动面板，在手风琴模式下其类型是 string | number，在其他模式下是 array	string | number | (string | number)[]	[]
title	面板标题	string	-
icon	自定义面板标题图标	string | Component	-
disabled	是否禁用当前面板	boolean	false
status	KCollapse 中 use-status 为 true 时生效，当前面板状态	enum	-

CollapseItem Slots

插槽名	描述	参数
default	默认插槽内容	-
title	自定义标题内容	-
icon	自定义图标内容	object