ZartUI — 折叠面板 Collapse

默认折叠,点击标题展开/收起,支持多项同时展开、禁用及无边框变体

基础折叠面板

默认全部折叠
折叠面板标题一
这里是折叠面板的正文内容区域。可以放置文字说明、图片、列表或其他组件。折叠面板适用于需要在有限空间内展示大量信息的场景,用户可以按需展开查看详细内容。
折叠面板标题二
第二项的内容区域。支持多行文字,行高 1.8,字号 14px,颜色 #6B7A99。每个面板项的内容高度根据内容自适应。
折叠面板标题三
第三项的内容区域。折叠面板支持多个面板项同时展开,互不影响。
第一项默认展开
折叠面板标题一(默认展开)
这是默认展开的内容区域。箭头朝下,内容区域可见,内容字号 14px,颜色 #6B7A99,行高 1.8。
折叠面板标题二
第二项的内容区域,默认折叠,点击标题展开。
折叠面板标题三
第三项的内容区域,默认折叠。

含禁用项

第二项禁用
折叠面板标题一
正常项的内容区域,可以正常展开和折叠。
折叠面板标题二(禁用)
折叠面板标题三
第三项的内容区域,可以正常展开和折叠。

无边框变体

无外边框,仅分隔线
折叠面板标题一
无边框变体的内容区域,去掉外边框,仅保留各项之间的分隔线,适用于嵌入卡片或页面内容区的场景。
折叠面板标题二
第二项的内容。
折叠面板标题三
第三项的内容。
返回组件首页