Material-UI 折叠面板 Accordion 3 步上手默认展开与手风琴互斥一次搞定【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-uiMaterial-UI 的 Accordion折叠面板把长内容收进可点击展开的区块FAQ、设置页、多级文档都能用它省空间。它由 Accordion、AccordionSummary、AccordionDetails 三个组件配合工作自带展开动画和键盘操作。读完本文你能 3 步搭出最小可用面板再配出默认展开、换图标、互斥展开这些高频效果。什么场景用它 页面信息一多首屏全量铺开会让用户抓不住重点折叠面板把次要内容收起来点开才展开。它适合 FAQ、多级设置、文档目录这类按主题分层展示的页面默认收起保持首屏干净用户只展开关心的那一块。如果内容里还有表单、图表等重组件面板还能帮你控制它们的渲染时机。三步跑起来最小可用实现第 1 步导入组件需要四个包mui/material/Accordion、mui/material/AccordionSummary、mui/material/AccordionDetails外加mui/icons-material里的一个展开图标。第 2 步最小代码import Accordion from mui/material/Accordion; import AccordionSummary from mui/material/AccordionSummary; import AccordionDetails from mui/material/AccordionDetails; import ExpandMoreIcon from mui/icons-material/ExpandMore; export default function BasicAccordion() { return ( Accordion AccordionSummary expandIcon{ExpandMoreIcon /}面板标题/AccordionSummary AccordionDetails这里放折叠后的内容文本、表单都行。/AccordionDetails /Accordion ); }Summary 是可点击的头部Details 是内容区给 Summary 挂上 expandIcon 就是一个完整面板。第 3 步效果说明点击头部即可展开或收起内容带过渡动画键盘聚焦到头部后按回车或空格也能触发同样的操作这部分组件已经处理好。高频技巧清单让面板默认展开在 Accordion 上加defaultExpanded面板初始就是打开的适合放必须露出的内容用户也可以再点收起。Accordion defaultExpanded AccordionSummary expandIcon{ExpandMoreIcon /}重要信息进页面就展开/AccordionSummary AccordionDetails这个面板初始是打开的。/AccordionDetails /Accordion给展开按钮换个图标给expandIcon传别的图标就能换样式展开时的旋转过渡组件自动处理不用额外写 CSS。import ArrowForwardIosSharpIcon from mui/icons-material/ArrowForwardIosSharp; AccordionSummary expandIcon{ArrowForwardIosSharpIcon /} 换个方向的箭头当展开指示器 /AccordionSummary实现手风琴互斥一次只展开一个把面板改成受控模式用一个状态记住当前展开的是哪一项再给每个面板传expanded和onChange展开一项时其余自动收起。const [expanded, setExpanded] React.useState(false); const toggle (i: number) (e, isExpanded) setExpanded(isExpanded ? i : false); Accordion expanded{expanded 1} onChange{toggle(1)} AccordionSummary第一项/AccordionSummary AccordionDetails内容 1/AccordionDetails /Accordion Accordion expanded{expanded 2} onChange{toggle(2)} AccordionSummary第二项/AccordionSummary AccordionDetails内容 2/AccordionDetails /Accordion禁用某个面板disabled会把整个面板锁死点不动、无法聚焦、视觉变灰适合权限不足或暂未开放的功能项。Accordion disabled AccordionSummary expandIcon{ExpandMoreIcon /}锁定面板/AccordionSummary AccordionDetails这块内容无法展开。/AccordionDetails /Accordion实战搭一个 FAQ 页 ️真实项目里问题通常有十几条把问答放进数组再 map 渲染顺手加上互斥逻辑就是一个能直接上线的 FAQ 页。import * as React from react; import Accordion from mui/material/Accordion; import AccordionSummary from mui/material/AccordionSummary; import AccordionDetails from mui/material/AccordionDetails; import ExpandMoreIcon from mui/icons-material/ExpandMore; const FAQ [ { q: 支持哪些浏览器, a: 所有主流现代浏览器。 }, { q: 能服务端渲染吗, a: 可以面板内容默认保持挂载利于 SEO。 }, { q: 深色模式要单独适配吗, a: 不需要跟随 theme 的 mode 自动切换。 }, ]; export default function FaqPage() { const [open, setOpen] React.useState(false); return FAQ.map((item, i) ( Accordion key{i} expanded{open i} onChange{(e, isExpanded) setOpen(isExpanded ? i : false)} AccordionSummary expandIcon{ExpandMoreIcon /}{item.q}/AccordionSummary AccordionDetails{item.a}/AccordionDetails /Accordion )); }效果是典型的手风琴一次只展开一条问答点击别的问题当前项自动收起。如果答案区里有图片、图表这类重组件建议再补一条下面坑位里的unmountOnExit配置。常见坑位 ⚠️收起的面板还在占内存吗问题面板收起后内容真的从页面里消失了吗答案没有。默认情况下 Details 里的内容即使收起也保持挂载这是为了 SSR 和 SEO 考虑。面板数量多、内容重时才需要改成收起即卸载最小示例Accordion slotProps{{ transition: { unmountOnExit: true } }}收起时销毁 DOM展开时重新挂载。屏幕阅读器怎么知道面板状态问题用键盘和读屏软件的用户如何区分头部和内容答案给 AccordionSummary 设id并用aria-controls指向内容区域Accordion 会自动推导出对应的aria-labelledby不用手写。最小示例AccordionSummary idp1-header aria-controlsp1-content。受控面板点不动了问题传了expanded之后面板点了没反应像是失效了。答案受控组件必须闭环——你接管了expanded就必须同时处理onChange去更新状态只传一个属性组件不会替你存状态。最小示例Accordion expanded{open} onChange{(e, isExpanded) setOpen(isExpanded)}。延伸资源 Accordion 官方文档属性、定制、无障碍说明都在这里组件源码Accordion 及 Summary、Details 的实现受控手风琴完整示例官方仓库里的互斥展开写法下次写 FAQ 或设置页时先想到折叠面板一个状态变量加几行属性就能把长页面整理清爽。建议先把三步跑起来里的最小示例拷进项目跑一遍再按上面的清单逐个加上互斥和性能配置。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考