Material-UI折叠面板3步从单面板跑到嵌套实战【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui产品页越做越长设置要分五组FAQ 要列二十条全部平铺出来用户没人愿意滚到底。Material-UI 的折叠面板 Accordion 就是为这类信息密度高的页面准备的把相关内容收进可独立展开的分区用户一次只看一块页面长但不显乱。准备工作 如果项目里还没装 Material-UI先补装主包和图标包。本文涉及 Accordion 的四个子组件、Typography、Button 和一个展开箭头图标导入语句一次写全后面各节的示例直接复用// npm install mui/material mui/icons-material import * as React from react; import Accordion from mui/material/Accordion; import AccordionSummary from mui/material/AccordionSummary; import AccordionDetails from mui/material/AccordionDetails; import AccordionActions from mui/material/AccordionActions; import Typography from mui/material/Typography; import Button from mui/material/Button; import ExpandMoreIcon from mui/icons-material/ExpandMore;安装行放在注释里按你项目实际的包管理器执行即可。四个 Accordion 开头的组件在包内是独立入口按需导入对打包体积更友好。跑通第一个折叠面板 ⚡下面这段代码可以直接跑一个标题、一段正文、一个展开箭头行内注释标出了每个部件的职责。Accordion {/* 标题区整行都是点击热区触发 展开/收起 */} AccordionSummary expandIcon{ExpandMoreIcon /} Typography运输政策/Typography /AccordionSummary {/* 内容区收起时整块被折叠隐藏 */} AccordionDetails Typography订单确认后 48 小时内发货偏远地区顺延 1–2 天。/Typography /AccordionDetails /AccordionAccordionSummary 是唯一的交互入口点击它才触发展开expandIcon 只是视觉提示展开时的 180° 翻转动画由组件接管不用自己写过渡。AccordionDetails 里可以放任意节点文本、列表、表单都能装下。组件拆解四个子组件各管什么 四个子组件分工明确源码结构也能印证这一点packages/mui-material/src/Accordion 目录下每个组件单独一个文件夹packages/mui-material/src/AccordionActions 也是同理子组件分工常用 propsAccordion容器持有展开状态与过渡逻辑defaultExpanded、expanded、onChange、disabledAccordionSummary标题区整行的点击热区expandIcon、id、aria-controlsAccordionDetails内容区承载具体业务节点id、aria-labelledbyAccordionActions底部操作区可选放一组按钮—Accordion 内部通过 Context 把展开状态下发给 Summary 和 Details所以三者必须按容器—标题—内容的嵌套顺序书写拆出来单独用不生效。常用配置 ️让面板默认展开Accordion defaultExpanded用户一进页面就该看到的信息适合这样处理比如结算页顶部的运费说明避免多一次点击。更换展开指示器AccordionSummary expandIcon{ArrowDownwardIcon /}翻转过渡由组件自动完成你只需保证新图标在视觉上能表达展开语义适合替换默认箭头以贴合品牌图标体系。整块禁用面板Accordion disabled功能未开通或权限不足的分区用这个保留占位和说明但不响应点击、不参与焦点循环。状态管理受控面板与 FAQ 单开模式 不传 expanded 时面板自管状态属于非受控用法。需要外部按钮联动、埋点上报时改用受控写法const [open, setOpen] React.useState(false); Accordion expanded{open} onChange{(e, isExpanded) setOpen(isExpanded)}onChange 的第二个参数就是新的展开状态。而 FAQ 页最常见的同一时间只展开一个面板核心思路是把当前打开的 id 存进 state每个面板拿同一个 state 比较自己const [openPanel, setOpenPanel] React.useState(q1); const handlePanel (id) (event, isExpanded) setOpenPanel(isExpanded ? id : false); Accordion expanded{openPanel q1} onChange{handlePanel(q1)} AccordionSummary expandIcon{ExpandMoreIcon /} Typography如何申请开票/Typography /AccordionSummary AccordionDetails Typography订单完成后 7 天内可在订单页发起申请。/Typography /AccordionDetails /Accordion // 其余面板写法相同换成不同 idexpanded 与 onChange 同步更换点击已展开的面板会收到 isExpanded 为 falsestate 回到 false于是全部收起点击另一个面板则互斥切换。层级化展示嵌套折叠面板 ️把整个 Accordion 写进另一个 AccordionDetails 就是嵌套没有额外 API。以下示例是总开关 两个分组的结构Accordion defaultExpanded AccordionSummary expandIcon{ExpandMoreIcon /}设置/AccordionSummary AccordionDetails Accordion AccordionSummary expandIcon{ExpandMoreIcon /}通知/AccordionSummary AccordionDetails邮件、短信、推送的开关。/AccordionDetails /Accordion Accordion AccordionSummary expandIcon{ExpandMoreIcon /}隐私/AccordionSummary AccordionDetails可见范围与数据授权。/AccordionDetails /Accordion /AccordionDetails /Accordion外层展开后内层面板各自独立控制自己的状态互不干扰。文档目录、多级设置、分类表单都适合这种结构。建议层级控制在两层再深的嵌套会让用户记不清自己处在哪一层不如换成标签页或侧边导航。体验优化 ⚙️收起即卸载降低 DOM 与内存占用Accordion slotProps{{ transition: { unmountOnExit: true } }} /默认情况下内容即使收起也保留在 DOM 中这是为服务端渲染和 SEO 做的取舍。当面板内嵌套了重组件树、或一屏排了十几个面板时给 transition 传入 unmountOnExit收起即卸载节点能实打实减少内存与 DOM 开销。ARIA 属性两两关联AccordionSummary idfaq-q1 aria-controlsfaq-a1 Typography如何申请开票/Typography /AccordionSummary AccordionDetails idfaq-a1 aria-labelledbyfaq-q1id 与 aria-controls、aria-labelledby 一一对应屏幕阅读器才能正确读出当前标题控制哪块内容。动态列表里用 JS 生成 id 时注意保证全局唯一比如结合 React 的 useId。常见问题 ❓Q1面板收起后内容为什么还占内存因为默认是挂载但隐藏DOM 一直在。给 transition 加 unmountOnExit 即可改为收起时卸载代价是每次展开都会重新渲染内容频繁切换的轻内容可以不改。Q2展开动画怎么控制通过 slots.transition 换过渡组件slotProps.transition 配参数例如换成 FadeAccordion slots{{ transition: Fade }} slotProps{{ transition: { timeout: 400 } }} /Q3标题默认是什么级别的 heading默认渲染 h3。如果你的页面已有 h1、h2层级会错乱用 slotProps.heading.component 改成与文档结构匹配的级别。收尾与资源 折叠面板的价值不在组件本身而在分层展示信息这套交互先给目录再给详情。受控写法、嵌套结构和性能开关记住这三点产品里常见场景基本都能落地。组件文档Accordion 官方文档组件源码packages/mui-material/src/Accordion受控示例ControlledAccordions.tsx【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Material-UI折叠面板：3步从单面板跑到嵌套实战
Material-UI折叠面板3步从单面板跑到嵌套实战【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui产品页越做越长设置要分五组FAQ 要列二十条全部平铺出来用户没人愿意滚到底。Material-UI 的折叠面板 Accordion 就是为这类信息密度高的页面准备的把相关内容收进可独立展开的分区用户一次只看一块页面长但不显乱。准备工作 如果项目里还没装 Material-UI先补装主包和图标包。本文涉及 Accordion 的四个子组件、Typography、Button 和一个展开箭头图标导入语句一次写全后面各节的示例直接复用// npm install mui/material mui/icons-material import * as React from react; import Accordion from mui/material/Accordion; import AccordionSummary from mui/material/AccordionSummary; import AccordionDetails from mui/material/AccordionDetails; import AccordionActions from mui/material/AccordionActions; import Typography from mui/material/Typography; import Button from mui/material/Button; import ExpandMoreIcon from mui/icons-material/ExpandMore;安装行放在注释里按你项目实际的包管理器执行即可。四个 Accordion 开头的组件在包内是独立入口按需导入对打包体积更友好。跑通第一个折叠面板 ⚡下面这段代码可以直接跑一个标题、一段正文、一个展开箭头行内注释标出了每个部件的职责。Accordion {/* 标题区整行都是点击热区触发 展开/收起 */} AccordionSummary expandIcon{ExpandMoreIcon /} Typography运输政策/Typography /AccordionSummary {/* 内容区收起时整块被折叠隐藏 */} AccordionDetails Typography订单确认后 48 小时内发货偏远地区顺延 1–2 天。/Typography /AccordionDetails /AccordionAccordionSummary 是唯一的交互入口点击它才触发展开expandIcon 只是视觉提示展开时的 180° 翻转动画由组件接管不用自己写过渡。AccordionDetails 里可以放任意节点文本、列表、表单都能装下。组件拆解四个子组件各管什么 四个子组件分工明确源码结构也能印证这一点packages/mui-material/src/Accordion 目录下每个组件单独一个文件夹packages/mui-material/src/AccordionActions 也是同理子组件分工常用 propsAccordion容器持有展开状态与过渡逻辑defaultExpanded、expanded、onChange、disabledAccordionSummary标题区整行的点击热区expandIcon、id、aria-controlsAccordionDetails内容区承载具体业务节点id、aria-labelledbyAccordionActions底部操作区可选放一组按钮—Accordion 内部通过 Context 把展开状态下发给 Summary 和 Details所以三者必须按容器—标题—内容的嵌套顺序书写拆出来单独用不生效。常用配置 ️让面板默认展开Accordion defaultExpanded用户一进页面就该看到的信息适合这样处理比如结算页顶部的运费说明避免多一次点击。更换展开指示器AccordionSummary expandIcon{ArrowDownwardIcon /}翻转过渡由组件自动完成你只需保证新图标在视觉上能表达展开语义适合替换默认箭头以贴合品牌图标体系。整块禁用面板Accordion disabled功能未开通或权限不足的分区用这个保留占位和说明但不响应点击、不参与焦点循环。状态管理受控面板与 FAQ 单开模式 不传 expanded 时面板自管状态属于非受控用法。需要外部按钮联动、埋点上报时改用受控写法const [open, setOpen] React.useState(false); Accordion expanded{open} onChange{(e, isExpanded) setOpen(isExpanded)}onChange 的第二个参数就是新的展开状态。而 FAQ 页最常见的同一时间只展开一个面板核心思路是把当前打开的 id 存进 state每个面板拿同一个 state 比较自己const [openPanel, setOpenPanel] React.useState(q1); const handlePanel (id) (event, isExpanded) setOpenPanel(isExpanded ? id : false); Accordion expanded{openPanel q1} onChange{handlePanel(q1)} AccordionSummary expandIcon{ExpandMoreIcon /} Typography如何申请开票/Typography /AccordionSummary AccordionDetails Typography订单完成后 7 天内可在订单页发起申请。/Typography /AccordionDetails /Accordion // 其余面板写法相同换成不同 idexpanded 与 onChange 同步更换点击已展开的面板会收到 isExpanded 为 falsestate 回到 false于是全部收起点击另一个面板则互斥切换。层级化展示嵌套折叠面板 ️把整个 Accordion 写进另一个 AccordionDetails 就是嵌套没有额外 API。以下示例是总开关 两个分组的结构Accordion defaultExpanded AccordionSummary expandIcon{ExpandMoreIcon /}设置/AccordionSummary AccordionDetails Accordion AccordionSummary expandIcon{ExpandMoreIcon /}通知/AccordionSummary AccordionDetails邮件、短信、推送的开关。/AccordionDetails /Accordion Accordion AccordionSummary expandIcon{ExpandMoreIcon /}隐私/AccordionSummary AccordionDetails可见范围与数据授权。/AccordionDetails /Accordion /AccordionDetails /Accordion外层展开后内层面板各自独立控制自己的状态互不干扰。文档目录、多级设置、分类表单都适合这种结构。建议层级控制在两层再深的嵌套会让用户记不清自己处在哪一层不如换成标签页或侧边导航。体验优化 ⚙️收起即卸载降低 DOM 与内存占用Accordion slotProps{{ transition: { unmountOnExit: true } }} /默认情况下内容即使收起也保留在 DOM 中这是为服务端渲染和 SEO 做的取舍。当面板内嵌套了重组件树、或一屏排了十几个面板时给 transition 传入 unmountOnExit收起即卸载节点能实打实减少内存与 DOM 开销。ARIA 属性两两关联AccordionSummary idfaq-q1 aria-controlsfaq-a1 Typography如何申请开票/Typography /AccordionSummary AccordionDetails idfaq-a1 aria-labelledbyfaq-q1id 与 aria-controls、aria-labelledby 一一对应屏幕阅读器才能正确读出当前标题控制哪块内容。动态列表里用 JS 生成 id 时注意保证全局唯一比如结合 React 的 useId。常见问题 ❓Q1面板收起后内容为什么还占内存因为默认是挂载但隐藏DOM 一直在。给 transition 加 unmountOnExit 即可改为收起时卸载代价是每次展开都会重新渲染内容频繁切换的轻内容可以不改。Q2展开动画怎么控制通过 slots.transition 换过渡组件slotProps.transition 配参数例如换成 FadeAccordion slots{{ transition: Fade }} slotProps{{ transition: { timeout: 400 } }} /Q3标题默认是什么级别的 heading默认渲染 h3。如果你的页面已有 h1、h2层级会错乱用 slotProps.heading.component 改成与文档结构匹配的级别。收尾与资源 折叠面板的价值不在组件本身而在分层展示信息这套交互先给目录再给详情。受控写法、嵌套结构和性能开关记住这三点产品里常见场景基本都能落地。组件文档Accordion 官方文档组件源码packages/mui-material/src/Accordion受控示例ControlledAccordions.tsx【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考