Collapse 折叠面板

折叠面板组件用于将复杂的内容区域进行分组和隐藏,以保持页面的整洁。

请注意,折叠面板组件本身不包含任何样式,你需要自行添加样式,或者与其他组件一起使用。

使用方法

按需导入组件:

import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';

按需导入组件的 TypeScript 类型:

import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';

使用示例:

first content second content
<mdui-collapse>
  <mdui-collapse-item header="first header">first content</mdui-collapse-item>
  <mdui-collapse-item header="second header">second content</mdui-collapse-item>
</mdui-collapse>

示例

面板标题与内容

通过 <mdui-collapse-item> 组件的 header 属性可以设置面板头部的文本,也可以通过 header slot 来指定面板头部元素。组件的 default slot 用于面板内容。

手风琴模式

<mdui-collapse> 组件上添加 accordion 属性可以启用手风琴模式,这样一次只会有一个面板处于打开状态。

设置激活的面板

通过 <mdui-collapse> 组件的 value 属性,你可以获取当前打开的面板,或设置需要打开的面板。

在手风琴模式下,value 属性的值为字符串,你可以使用 HTML 属性或 JavaScript 属性来操作该属性;在非手风琴模式下,value 属性的值为数组,此时只能通过 JavaScript 属性进行操作。

禁用状态

通过在 <mdui-collapse> 组件上添加 disabled 属性,可以禁用整个折叠面板组。同样,通过在 <mdui-collapse-item> 组件上添加 disabled 属性,可以禁用特定的折叠面板。

触发折叠的元素

默认情况下,点击整个面板头部区域会触发折叠。你可以通过设置 <mdui-collapse-item> 组件的 trigger 属性来指定触发折叠的元素。trigger 属性可以是 CSS 选择器或 DOM 元素。

mdui-collapse API

属性

HTML 属性JavaScript 属性Reflect类型默认值
accordionaccordionbooleanfalse

是否启用手风琴模式

valuevaluestring | string[]-

当前展开的 <mdui-collapse-item> 的值

Note:该属性的 HTML 属性始终为字符串,只有在 accordiontrue 时,才能设置初始值;该属性的 JavaScript 属性值在 accordiontrue 时为字符串,在 accordionfalse 时为字符串数组。因此,当 accordionfalse 时,只能通过修改 JavaScript 属性值来改变此值。

disableddisabledbooleanfalse

是否禁用此折叠面板

事件

名称
change

当前展开的折叠面板项变化时触发

Slots

名称
默认

<mdui-collapse-item> 组件

mdui-collapse-item API

属性

HTML 属性JavaScript 属性Reflect类型默认值
valuevaluestring-

此折叠面板项的值

headerheaderstring-

此折叠面板项的头部文本

disableddisabledbooleanfalse

是否禁用此折叠面板项

triggertriggerstring | HTMLElement | JQ<HTMLElement>-

点击该元素时触发折叠,值可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为点击整个 header 区域触发

事件

名称
open

开始打开时,事件被触发

opened

打开动画完成时,事件被触发

close

开始关闭时,事件被触发

closed

关闭动画完成时,事件被触发

Slots

名称
默认

折叠面板项的正文内容

header

折叠面板项的头部内容

CSS Parts

名称
header

折叠面板的头部内容

body

折叠面板的正文内容

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库