Skip to content

Panel

Panel 是一个可折叠的内容容器组件,用于组织和展示信息,支持多种样式变体和自定义配置。它可以有效地节省页面空间,提高用户体验,常用于分组展示相关内容、FAQ、设置面板等场景。

引入

typescript
import { Panel } from '@versakit/vue'

使用

loading

API

属性

属性名说明类型默认值
title面板标题string-
variant面板样式变体'default' | 'bordered' | 'elevated''default'
padding内边距大小'none' | 'sm' | 'md' | 'lg''md'
radius圆角大小'none' | 'sm' | 'md' | 'lg' | 'full''md'
collapsible是否可折叠booleanfalse
defaultCollapsed是否默认折叠booleanfalse
bordered是否显示边框booleantrue
unstyled是否使用无样式模式booleanfalse
pt传递模板样式PanelPT-

事件

事件名说明回调参数
update:collapsed折叠状态变化时触发(collapsed: boolean) => void
collapse折叠状态变化时触发(collapsed: boolean) => void

插槽

插槽名说明
default面板内容
title自定义标题
icon自定义折叠图标

样式定制

当使用 unstyled 模式时,可以通过 pt 属性传递自定义样式:

typescript
interface PanelPT {
	root?: string
	header?: string
	title?: string
	content?: string
	icon?: string
}