5分钟掌握 Material-UI Accordion 折叠面板：从最小示例到嵌套实战完整指南

5分钟掌握 Material-UI Accordion 折叠面板从最小示例到嵌套实战完整指南【免费下载链接】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内容区放正文、表单等必需AccordionActions底部操作条放按钮等控件可选源码目录在packages/mui-material/src/其中Accordion负责状态逻辑AccordionSummary、AccordionDetails、AccordionActions各自独立成目录改样式前建议先看一遍。30 秒跑通最小示例 ⚡先引入四个组件。expandIcon只是可选的展开指示图标不传也能工作。import * as React from react; import Accordion from mui/material/Accordion; import AccordionSummary from mui/material/AccordionSummary; import AccordionDetails from mui/material/AccordionDetails; import Typography from mui/material/Typography; import ExpandMoreIcon from mui/icons-material/ExpandMore;下面是一个最小的可运行面板export default function MyAccordion() { return ( Accordion AccordionSummary expandIcon{ExpandMoreIcon /} Typography面板标题/Typography /AccordionSummary AccordionDetails Typography面板正文可以放任意内容。/Typography /AccordionDetails /Accordion ); }运行后你会看到一个带标题条的面板点击标题可展开正文图标随之旋转 180 度。参数速查表 ️属性作用何时用defaultExpanded首次渲染即展开之后自管理只想要初始状态、不接管后续点击expanded受控展开状态需要同时只开一个等外部逻辑onChange状态变化回调签名(event, isExpanded)受控模式下必须配合使用expandIcon在AccordionSummary上自定义展开指示图标换图标或调整指示器样式disabled锁定面板为收起且不可点击前置条件未满足时占位disableGutters去掉展开时的上下间距面板紧贴排列不要留白square去掉圆角与相邻卡片拼接成直角块slotProps.transition给内部Collapse过渡组件传参需要unmountOnExit等精细控制解决 3 个高频问题 怎么让面板默认展开加一个布尔属性即可首次渲染就处于展开态。Accordion defaultExpanded {/* 子组件结构不变 */} /Accordion页面加载后该面板直接展示正文用户仍可点击标题收起。怎么换成自己的图标把expandIcon换成任意图标组件旋转动画由组件自动处理。import ArrowDropDownIcon from mui/icons-material/ArrowDropDown; AccordionSummary expandIcon{ArrowDropDownIcon /} Typography自定义图标/Typography /AccordionSummary展开、收起时图标会平滑旋转不需要你写任何过渡代码。怎么做到同时只展开一个用一个字符串记录当前展开项每次变化时覆盖它而不是各自维护布尔值。const [open, setOpen] React.useState(p1); const handleChange (panel) (event, isExpanded) setOpen(isExpanded ? panel : false); div Accordion expanded{open p1} onChange{handleChange(p1)} {/* 面板 1 */} /Accordion Accordion expanded{open p2} onChange{handleChange(p2)} {/* 面板 2 */} /Accordion /div点开面板 2 时面板 1 自动收起再点当前面板则全部收起就是 FAQ 的经典行为。进阶性能与无障碍 ⚙️收起即卸载什么时候需要面板里嵌了图表、数据表格等重组件收起后还挂在内存里。默认内容只是隐藏DOM 仍在。Accordion slotProps{{ transition: { unmountOnExit: true } }} {/* 子组件结构不变 */} /Accordion收起时子树被真正销毁展开时重新挂载。注意输入框里的未保存数据会随之丢失。屏幕阅读器支持什么时候需要产品要做无障碍验收时。组件已内置aria-expanded、roleregion和标题关联你只需保留默认结构。AccordionSummary idpanel1-header aria-controlspanel1-content Typography标题/Typography /AccordionSummary AccordionDetails idpanel1-content /AccordionSummary会自动把id传给标题、把aria-controls传给内容区两者互相引用后读屏体验最顺。实战嵌套结构 Accordion AccordionSummary expandIcon{ExpandMoreIcon /} Typography主面板/Typography /AccordionSummary AccordionDetails Accordion defaultExpanded AccordionSummary expandIcon{ExpandMoreIcon /} Typography子面板 1/Typography /AccordionSummary AccordionDetails Typography子面板 1 的内容。/Typography /AccordionDetails /Accordion Accordion AccordionSummary expandIcon{ExpandMoreIcon /} Typography子面板 2/Typography /AccordionSummary AccordionDetails Typography子面板 2 的内容。/Typography /AccordionDetails /Accordion /AccordionDetails /Accordion外层收起时里面的子面板会一起隐藏。这种结构适合文档目录树和多层筛选器。嵌套面板共享主题样式但展开状态互不联动各管各的。常见问题 ❓图标不旋转是怎么回事旋转由AccordionSummary内部的图标包装层完成展开时加expanded类名触发过渡。如果你的图标没转多半是全局 CSS 或主题覆盖了旋转样式检查一下expandIconWrapper相关的样式即可。受控模式不生效同时提供expanded和defaultExpanded时以expanded为准。受控面板完全由你传入的expanded决定点击不会自己变化。必须配合onChange更新外部状态缺了它点击就没反应。收起后内容为什么不卸载内部Collapse过渡默认收起后仍保留 DOM 节点。想让节点销毁通过slotProps.transition.unmountOnExit开启即可不加这个参数卸载永远不会发生。Accordion 的状态、受控、卸载和嵌套就靠上面这些 API 全部覆盖。官方文档在docs/data/material/components/accordion/accordion.md源码在packages/mui-material/src/Accordion/受控示例可直接参考docs/data/material/components/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），仅供参考