手风琴模式
手风琴模式下,同时只会保持一个面板展开。点击当前标题会自动收起其他面板。
当前项展开时,其他已展开的项会自动收起。这里用于验证切换动画和事件回调。
禁用状态下不会响应点击,也不会触发展开或收起。
普通模式-可同时展开的分组折叠列表
{{ item.title }}
externalClass 示例
通过 title-class 可以覆盖 title 属性对应 text 组件的样式。
通过 arrow-class 可以覆盖默认箭头 view 的尺寸、边框粗细和颜色。
title-class 和 arrow-class 可以组合使用。
具名插槽标题
消息中心
{{ open ? 'OPEN' : 'CLOSE' }}
通过 #title 可以自定义标题区域结构,例如在文字前增加图标、状态徽标和辅助说明。
设置中心
{{ open ? '当前已展开' : '点击展开配置项' }}
具名插槽会透出 open 和 disabled 状态,方便你在标题区域里联动样式。
暗黑模式 externalClass 示例
这个示例通过给 uni-collapse-item 传入 class 和 externalClass,分别定制内容区和标题区样式。
组件根节点通过 class 统一接入暗色卡片样式,标题背景、默认文字、展开态文字和箭头颜色通过 externalClass 传入。
你也可以继续组合不同的根容器 class、标题字重、箭头粗细和激活色样式。
禁用态默认通过透明度表达状态,外部依然可以继续指定禁用态文字和箭头颜色。
最近事件
{{ data.lastEvent }}