辅助 · 18 / 21
Collapse st-collapse
只做一件事：把 hide 变成高度 0，展开时高度跟随内容（ResizeObserver）。没有内置标题、箭头或折叠组，触发源与内容排版全部由你组合；默认展开，写 hide 才收起。
基础展开 / 收起
唯一的语义属性是 hide。模板里用 attr:hide 绑定一个布尔值，点击按钮改 data 即可切换；展开与收起各 0.3s，走 M3 emphasized 高度动画。不写 hide 就是默认展开。
LIVE
attr:hide折叠容器本身没有外观
圆角、描边、内边距都由这段内容自己声明。组件只负责量高与过渡，不会向内容注入任何样式。
示例代码
<st-collapse attr:hide="collapsed">
<div>折叠内容</div>
</st-collapse>
<st-button on:click="collapsed = !collapsed">展开 / 收起</st-button>内容高度自动跟随
保持展开时，内容高度变化由 ResizeObserver 捕捉并瞬时更新——这是为了嵌套折叠时外层不会追赶内层动画。图片加载、列表增删、异步文案变长都不需要手动测量。
LIVE
ResizeObserver为什么折叠容器里总能显示完整内容？
内容始终在 DOM 里，高度由里向外测量。下面的补充说明出现时，容器高度已经跟着变高，不需要重新打开。
{{detailText}}
示例代码（内容动态变化）
<st-collapse>
<div>基础说明</div>
<!-- 异步插入的段落：高度由 ResizeObserver 自动跟随 -->
<p>补充内容</p>
</st-collapse>手风琴：多个 collapse 共享一个索引
组件没有 accordion 或 group API。把多个 st-collapse 的 hide 都绑定到同一个 openSection，点击行头只保留一个展开，就得到单选手风琴；数据结构决定行为，不需要额外的容器组件。
LIVE
单选折叠示例代码（单选手风琴）
<st-button variant="text" on:click="toggleSection(0)">问题一</st-button>
<st-collapse attr:hide="openSection !== 0">答案一</st-collapse>
<st-button variant="text" on:click="toggleSection(1)">问题二</st-button>
<st-collapse attr:hide="openSection !== 1">答案二</st-collapse>
<script>
toggleSection(i) {
this.openSection = this.openSection === i ? -1 : i;
}
</script>多区独立展开
把每个区块绑定到各自的布尔值即可多选展开；与手风琴的区别只在 data 结构，组件用法完全一致。每个区块可以单独加边框与标题，形成设置面板。
LIVE
独立布尔值示例代码（多个独立区块）
<st-button variant="text" on:click="notify = !notify">通知设置</st-button>
<st-collapse attr:hide="!notify">通知内容</st-collapse>
<st-button variant="text" on:click="privacy = !privacy">隐私设置</st-button>
<st-collapse attr:hide="!privacy">隐私内容</st-collapse>内容透传：折叠里放列表与按钮
collapse 不解析插槽、不注入样式，内容是完整透传的。可以把 st-list、st-button、表单或另一个 collapse 直接放进去；嵌套折叠时外层高度会逐帧同步内层，不会出现迟缓拖尾。
LIVE
组合内容
展开状态：{{advanced ? "已展开" : "已收起"}} · 点击 {{saved}} 次（含嵌套项）
示例代码（列表 + 嵌套折叠）
<st-collapse attr:hide="advanced">
<st-list>
<st-list-item button>性能模式</st-list-item>
<st-list-item collapsible>
实验特性
<st-list slot="sublist">
<st-list-item button>Beta 通道</st-list-item>
</st-list>
</st-list-item>
</st-list>
</st-collapse>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
hide | boolean | 无（展开） | 收起为高度 0 + overflow hidden；移除即展开 |
style | 原生 CSS | 无 | 圆角/描边/宽度直接写宿主；高度由组件接管 |
插槽 / 事件 / 注意
- 插槽：只有默认插槽，内容完全透传；标题、箭头、触发按钮由使用者自备。
- 事件：无自定义事件；切换
hide只播放高度动画，不派发 open/close。 - 动画：切换
hide为 0.3scubic-bezier(0.2, 0, 0, 1)；内容尺寸变化瞬时跟随（ResizeObserver）。 - 没有
disabled、multiple、accordion等属性；禁用交互请禁用触发源。 - 收起时内容仍在 DOM 中；需要条件渲染或懒加载，在外部用数据控制内容。
- 嵌套折叠可直接组合；外层会逐帧跟随内层高度，不需要手动调用刷新。