展开收起项展示
它让一段附加内容在原地展开或收起,标题始终留在原来的位置。
- 点小箭头就展开更多内容
- 标题下面藏着一段可以打开
- 点一下看详情再点一下收起来
- 披露控件
- 折叠项
- 可展开详情
示例
Web / iOS / Android 对照
Web原生支持
桌面与移动端现代浏览器
Details
也叫 Disclosure
<details> + <summary>
iOS原生支持
iOS / iPadOS
Disclosure Group
也叫 Disclosure Control
SwiftUI: DisclosureGroup
Android需自己实现
Android 手机 / 平板
Disclosure
也叫 Expandable Row
Material 3 没有通用 Disclosure 组件,需要把可点击标题、展开状态和内容动画自行组合。
通常怎么做:使用 Button 或可点击列表行控制 AnimatedVisibility,并为状态提供展开或收起说明。
使用规范
什么时候用
- 附加详情不是每个人都需要,展开后仍应留在当前上下文
什么时候别用
- 核心信息不能默认隐藏,或多个折叠项本质上是页面导航
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。