{
  "id": "progressive-disclosure",
  "type": "patterns",
  "status": "published",
  "name": {
    "zh": "渐进式披露",
    "en": "Progressive Disclosure"
  },
  "aliases": [
    "Progressive Disclosure",
    "渐进式披露",
    "逐步展开",
    "分步显示",
    "折叠收起详情",
    "点开看更多",
    "显示高级选项"
  ],
  "category": [
    "Content",
    "Interaction"
  ],
  "description": {
    "zh": "把信息分层呈现：先给最常用、最必要的部分，把次要细节藏到\"展开\"\"下一步\"\"显示更多\"后面， 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担，让界面入门简单，同时保留深度供高级用户按需取用。",
    "en": "Layer the information: show only the most common and necessary parts first, hiding secondary details behind \"expand\", \"next step\" or \"show more\" until the user asks for them. It solves the problem of overwhelming users at once — the initial cognitive load stays low and the surface easy to learn, while depth remains available on demand for advanced users."
  },
  "use_when": [
    {
      "zh": "设置页中低频的高级选项",
      "en": "Advanced, low-frequency options on settings pages"
    },
    {
      "zh": "表单中选填或仅在特定条件下需要的字段",
      "en": "Optional form fields needed only in specific cases"
    },
    {
      "zh": "长内容的摘要与全文分层",
      "en": "Summaries that can stand alone before the full text"
    }
  ],
  "avoid_when": [
    {
      "zh": "高频功能被折叠后难以被发现",
      "en": "Frequently used features — hiding them hurts discoverability"
    },
    {
      "zh": "用户需要横向对比全部选项",
      "en": "Users must compare all options side by side"
    },
    {
      "zh": "关键路径操作，隐藏会直接阻断任务",
      "en": "Critical-path steps — hiding them blocks the task"
    }
  ],
  "tags": [
    "content",
    "hierarchy",
    "interaction",
    "forms"
  ],
  "variants": [
    {
      "id": "collapse",
      "name": {
        "zh": "折叠展开",
        "en": "Collapsible section"
      },
      "note": {
        "zh": "折叠面板承载次要信息，箭头指示状态",
        "en": "A collapsed panel holds secondary details, arrow shows state"
      }
    },
    {
      "id": "excerpt",
      "name": {
        "zh": "摘要 + 显示更多",
        "en": "Excerpt + show more"
      },
      "note": {
        "zh": "先给节选，点击展开完整列表或全文",
        "en": "Show an excerpt first; expand to the full list or text on demand"
      }
    },
    {
      "id": "stepwise",
      "name": {
        "zh": "分步呈现",
        "en": "Stepwise reveal"
      },
      "note": {
        "zh": "向导式逐屏揭示，一步只做一件事",
        "en": "Wizard-style screens revealing one thing at a time"
      }
    }
  ],
  "anatomy": [
    "主内容区（Primary content）",
    "展开触发器（Disclosure trigger）",
    "次级内容区（Secondary content）",
    "状态指示（Expanded state indicator）"
  ],
  "applicable_components": [
    "accordion"
  ],
  "applicable_pages": [
    "settings",
    "documentation"
  ],
  "related": [
    {
      "id": "accordion",
      "relation": "used_with"
    },
    {
      "id": "form-validation",
      "relation": "similar_to"
    },
    {
      "id": "onboarding-tour",
      "relation": "similar_to"
    },
    {
      "id": "drawer",
      "relation": "used_with"
    },
    {
      "id": "tooltip",
      "relation": "used_with"
    }
  ],
  "demo": {
    "component": "progressive-disclosure",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "implementation": {
    "css": [
      "max-height transition",
      "grid-template-rows",
      "aria-expanded",
      "rotate"
    ],
    "notes": {
      "zh": "触发器绑定 aria-expanded 与 aria-controls，展开区用 max-height 或 grid-template-rows: 0fr/1fr 过渡高度；默认收起时次级内容不渲染或 hidden， 避免隐藏字段参与校验。箭头图标随状态旋转，动画尊重 prefers-reduced-motion。",
      "en": "Wire the trigger with aria-expanded and aria-controls; transition height via max-height or grid-template-rows: 0fr/1fr. Keep hidden fields unrendered or display:none when collapsed so they skip validation. Rotate the chevron with state and respect prefers-reduced-motion."
    }
  },
  "sources": [
    {
      "name": "NN/g — Progressive Disclosure",
      "url": "https://www.nngroup.com/articles/progressive-disclosure/"
    },
    {
      "name": "Apple HIG — Expanding Content",
      "url": "https://developer.apple.com/design/human-interface-guidelines/"
    }
  ],
  "prompts": {
    "basic": {
      "zh": "创建一个渐进式披露（Progressive Disclosure）表单：默认只显示标题和正文， 点击「高级选项」展开标签与可见范围设置。",
      "en": "Create a progressive disclosure form where only title and body are visible by default; clicking \"Advanced options\" expands tags and visibility settings."
    },
    "design": {
      "zh": "设计一个渐进式披露的发布表单。要求：主表单只保留必要字段；\"高级选项\"触发器带旋转箭头 与 aria-expanded；展开区高度平滑过渡，字段分组清晰；收起后表单其余布局不跳动；支持深浅色主题。",
      "en": "Design a publish form with progressive disclosure. Requirements: the primary form keeps only essential fields; the \"Advanced options\" trigger has a rotating chevron and aria-expanded; the expanded region transitions height smoothly with clear field grouping; collapsing causes no layout jump; light/dark themes."
    },
    "implementation": {
      "zh": "用 React + Tailwind 实现 Progressive Disclosure。useState 管理 open； 触发按钮设置 aria-expanded 并旋转箭头图标；展开区用 grid-template-rows: 0fr / 1fr 加 transition 实现高度动画； 收起时次级字段设置 hidden 以跳过表单校验。尊重 prefers-reduced-motion （关闭高度过渡）。",
      "en": "Implement Progressive Disclosure in React + Tailwind. Manage `open` with useState; set aria-expanded on the trigger and rotate the chevron; animate height with grid-template-rows: 0fr / 1fr plus transition; keep secondary fields hidden while collapsed so form validation skips them. Respect prefers-reduced-motion (disable the height transition)."
    },
    "agent": {
      "zh": "在当前项目中实现渐进式披露（Progressive Disclosure）。\n\n先检查现有折叠组件与表单体系，优先复用现有的展开动画与箭头图标。\n用途：发布表单的高级选项区域。\n要求：\n- 默认只显示必要字段，高级选项默认收起\n- 触发器带 aria-expanded / aria-controls，箭头随状态旋转\n- 展开高度平滑过渡，收起时其余布局不跳动\n- 收起的字段不参与校验\n- 尊重 prefers-reduced-motion\n- 不新增不必要的依赖\n完成后运行项目现有检查，并列出修改的文件。",
      "en": "Implement Progressive Disclosure in the current project.\n\nInspect the existing accordion components and form system first; reuse existing expand animations and chevron icons.\nUsage: an advanced-options region on a publish form.\nRequirements:\n- Only essential fields visible by default; advanced options collapsed\n- Trigger carries aria-expanded / aria-controls with a state-rotated chevron\n- Smooth height transition on expand; no layout jump for the rest of the form\n- Collapsed fields excluded from validation\n- Respect prefers-reduced-motion\n- No unnecessary dependencies\nRun existing project checks when done and list the modified files."
    }
  }
}