返回 docs

List Demo

多级缩进的卡片列表 demo

纯三级树形列表，每级独立卡片；一级和二级可折叠，靠缩进与左侧引导线表达层级。

自适应预览

  • 需求整理

    把零散想法收拢成清晰的页面目标、范围和验收点。这一阶段决定后面每一张卡片该写多少、写到哪一层，也决定哪些节点只需要一行标题就够。

    Step 01

    • 收集输入

      汇总文案与参考。

      01.1

    • 定义范围

      明确这次 demo 只验证列表样式，不引入额外交互和数据请求。范围写清楚后，子卡片就可以有的长、有的短，方便观察高度参差。

      • 一级、二级卡片支持折叠
      • 缩进层级最多到三级
      • meta 标签仅作视觉辅助
      01.2

  • 内容结构

    Step 02

    • 标题与摘要

      一级卡片承载阶段目标，子级卡片补充更细的执行项。

      02.1

      • 标题层级

        02.1.1

      • 摘要长度

        保持一行到两行，方便在移动端也能快速扫读。若某个节点需要补充上下文，可以再加一小段说明或几条 note，让卡片自然变高。

        02.1.2

    • 状态与顺序

      同级卡片按流程顺序排列。

      • 父项在前，子项紧随其后
      • 同级之间保持相同 gap
      02.2

  • 视觉排布

    纵向列表 + 逐级缩进。

    Step 03

    • 缩进规则

      每一级增加固定左侧内边距，让父子关系一眼可见。缩进只影响水平位置，不会强行拉齐卡片高度；因此当某张卡片内容更长时，它会自然地比邻居更高，形成参差节奏。

      03.1

    • 卡片间距

      03.2

  • 交互检查

    确认桌面和移动端都能自然阅读，不出现挤压和横向溢出。重点观察：当同级卡片高度不一致时，标题与正文是否仍然顶对齐，长文案换行后是否撑开容器。

    Step 04

    • 桌面端

      检查对齐。

      04.1

    • 移动端

      窄屏下缩进逐级累加，但标题和摘要仍保持可读宽度。若某张卡片附带多条 note，应确认列表项不会把卡片撑破容器，也不会造成横向滚动。

      • 320px 宽度下仍能完整阅读
      • 长标题允许换行，不与 meta 标签互相挤压
      • 折叠按钮与标题保持同一行对齐
      04.2