内容 · 15 / 21
List st-list
st-list 只负责纵向排列，st-list-item 负责内容与交互：button 可点击、disabled 禁用、collapsible + expanded 折叠子列表。首尾项自动大圆角，子列表按层级自动缩进。
基础结构：prefix、副文本与 suffix
默认插槽是正文，prefix / suffix 放图标或数量，正文里的任意子元素加 secondary 属性就显示为小号灰色副文本。st-list 内直接用原生 hr 做分隔线，首尾项自动使用更大圆角。
st-list + st-list-item示例代码
<st-list>
<st-list-item button>
<iconify-icon slot="prefix" icon="mdi:inbox-arrow-down"></iconify-icon>
<div>收件箱<span secondary>12 封未读</span></div>
<span slot="suffix">12</span>
</st-list-item>
<hr>
<st-list-item>垃圾邮件</st-list-item>
</st-list>可点击项：button 与 click
加 button 才有点击态：hover / active state layer 与整行波纹。没有 button 的项只是普通内容，点击没有这些视觉反馈，但原生 click 仍会冒泡；click 是原生且 composed 的，用 on:click 直接监听即可。
button + on:click示例代码（点击分发）
<st-list-item button on:click="pick('个人资料')">
<span slot="prefix">👤</span>
<div>个人资料<span secondary>头像、昵称与简介</span></div>
<iconify-icon slot="suffix" icon="mdi:chevron-right"></iconify-icon>
</st-list-item>禁用项 disabled
disabled 只降低内容透明度（0.38）并阻断交互：内部原生 button 被禁用，click / hover / 波纹 / 键盘全部失效，state layer 也不显示。它不会隐藏该项，适合表达“当前不可用但需要被看到”。
disabled示例代码
<st-list-item button disabled>禁用的可点击项</st-list-item>
<st-list-item disabled>禁用的普通项</st-list-item>可折叠子列表 collapsible + expanded
collapsible 显示展开箭头，点击只切换 expanded、不派发 click；展开区域用 sublist 插槽，通常再放一个 st-list。默认展开就写 expanded，层级缩进自动按祖先 st-list 的层数累加。
collapsible / sublist示例代码（两级折叠）
<st-list-item collapsible expanded>
<span slot="prefix">📁</span>
<div>项目</div>
<st-list slot="sublist">
<st-list-item button>设计系统</st-list-item>
<st-list-item collapsible>
归档
<st-list slot="sublist">
<st-list-item button>2024</st-list-item>
</st-list>
</st-list-item>
</st-list>
</st-list-item>缩进量与尺寸
每层缩进默认 1em，由行内占位实现，点击区始终是整行宽。需要更明显的层级时，在外层 st-list 上覆盖 --st-list-step；尺寸类默认值都用 em，改 font-size 即可整体缩放。
--st-list-step / font-size示例代码（调整缩进步长）
<st-list style="--st-list-step: 2em; font-size: 15px;">
<st-list-item collapsible expanded>
<div>一级</div>
<st-list slot="sublist">
<st-list-item button>二级（缩进 2em）</st-list-item>
</st-list>
</st-list-item>
</st-list>导航与设置列表
导航列表就是“button 项 + suffix 箭头”。多组列表各用独立的 st-list，用标题或 demo-label 分组；每项点击后由外部决定路由或状态，st-list 本身不管理选中项。
多组列表示例代码（导航列表）
<st-list>
<st-list-item button on:click="go('account')">
<span slot="prefix">🪪</span>账户信息<iconify-icon slot="suffix" icon="mdi:chevron-right"></iconify-icon>
</st-list-item>
<st-list-item button on:click="go('security')">
<span slot="prefix">🔑</span>登录方式<iconify-icon slot="suffix" icon="mdi:chevron-right"></iconify-icon>
</st-list-item>
</st-list>属性（st-list-item）
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
button | boolean | 无 | 可点击项：state layer + 波纹 + 原生 click |
disabled | boolean | 无 | 0.38 透明度，阻断点击 / 键盘 / 波纹 |
collapsible | boolean | 无 | 显示箭头，点击切换 expanded（不派发 click） |
expanded | boolean | 无 | 子列表展开；配合 collapsible 使用 |
style | 原生 CSS | 无 | st-list 上可覆写 --st-list-step、font-size 等 |
插槽 / 事件 / 注意
- st-list 无语义属性；st-list-item 插槽：
prefix/ 默认正文 /suffix/sublist。 - 副文本：正文子元素加
secondary属性；分隔线直接放原生<hr>。 - 事件：
button项的 click 原生冒泡（composed）；plain 项的原生 click 也会冒泡但没有交互态；折叠项点击只切换 expanded。 - 键盘：button / collapsible 项由内部原生 button 承载，Tab 聚焦、Enter / Space 激活。
- 缩进：每层
1em，用--st-list-step调整；不要给 sublist 加左 margin / padding。 - 圆角：首尾项自动
1.143em，中间项0.5em；st-list 默认 gap0.143em。 - 嵌套折叠的高度动画由内层 st-collapse 负责，外层逐帧跟随，属正常表现。