Material-UI 折叠面板实战3 个场景搭好 FAQ、目录与层级内容【免费下载链接】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就是干这件事的内容默认收起用户点击才展开把内容墙变成可自主浏览的层级结构。它由 4 个小组件协作完成下面按真实使用场景逐个拆开讲。3 分钟搭出基础折叠面板 ⚡四个组件各管一段分工很清楚Accordion最外层容器管理开合状态并通过 Context 把状态和切换函数下发给子组件见 Accordion 源码。AccordionSummary可点击的标题行本质是个带aria-expanded的按钮。AccordionDetails正文区域内部套在Collapse过渡容器里所以展开收起自带高度动画。AccordionActions可选在面板底部放一排操作按钮比如取消/同意。导入和最小用法一次看完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 ExpandMoreIcon from mui/icons-material/ExpandMore; Accordion AccordionSummary expandIcon{ExpandMoreIcon /} Typography配送说明/Typography /AccordionSummary AccordionDetails Typography正文区域可放任意 React 组件/Typography /AccordionDetails /Accordion记住一条约束Accordion 的第一个子元素必须是 AccordionSummary源码里会校验。不需要按钮的话AccordionActions 整块删掉即可。受控模式实现一次只展开一个折叠面板FAQ 页最常见的诉求是打开第二个问题面板时第一个自动收起来。这要用受控模式——不写defaultExpanded改用expandedonChange状态上提到父组件。核心是存当前打开的面板 id而不是布尔值const [expanded, setExpanded] useState(false); const handleChange (panel) (event, isExpanded) setExpanded(isExpanded ? panel : false); Accordion expanded{expanded faq1} onChange{handleChange(faq1)} AccordionSummary expandIcon{ExpandMoreIcon /} Typography如何修改收货地址/Typography /AccordionSummary AccordionDetails Typography……/Typography /AccordionDetails /Accordion // 其余面板同构只替换 id 与文案handleChange(faq1)这种柯里化写法避免给每个面板单独定义事件函数。官方仓库里有一份完整实现可对照ControlledAccordions 示例。反过来如果业务允许多个面板同时展开如全部展开按钮就不必受控每个面板各管各的状态即可。嵌套折叠面板示例文档目录与设置中心的层级结构文档目录、设置中心这类大类套小类的结构直接往 AccordionDetails 里再嵌一层 Accordion 就行没有任何特殊 APIAccordion defaultExpanded {/* 外层主面板 */} AccordionSummary Typography订单管理/Typography /AccordionSummary AccordionDetails Accordion {/* 直接再嵌一个 Accordion */} AccordionSummary Typography物流追踪/Typography /AccordionSummary AccordionDetails Typography子面板正文/Typography /AccordionDetails /Accordion /AccordionDetails /Accordion嵌套面板的间距靠外层margin撑开层级一多会显得松散给子级面板加disableGutters可以收紧间距。另外注意标题默认渲染成h3嵌套时用slotProps{{ heading: { component: h4 } }}调整层级避免文档里出现两个同级标题。细节打磨defaultExpanded、disabled 与 unmountOnExit 性能优化按解决什么问题来记这几个属性defaultExpanded首屏就该露出的关键信息如重要提示不必让用户多点一次。注意它只定初始值之后面板不受控和expanded二选一。disabled面板置灰且不可聚焦适合该功能未开通这类占位项。expandIcon换个箭头图标旋转动画组件自动处理不用自己写 transform。unmountOnExit这是唯一值得专门说的性能项。默认情况下内容即使收起也挂载在 DOM 里——这是有意为之利于 SSR 和 SEO。但当你一屏放十几个面板、或正文里塞了重量级组件图表、数据网格时首屏渲染成本会明显上升。把过渡容器换成收起即卸载Accordion slotProps{{ transition: { unmountOnExit: true } }} /代价是展开时重新执行挂载逻辑纯文本面板保持默认即可。最后是 ARIAWAI-ARIA 规范要求标题和内容互相指向。只需在 AccordionSummary 上补一对属性Accordion 会自动推导其余链接关系AccordionSummary idfaq-1-header aria-controlsfaq-1-contentid 建议用React.useId()生成保证动态渲染下唯一。折叠面板资源索引Accordion 的四个组件都很薄开合逻辑、过渡和 ARIA 推导都集中在容器组件里读源码不费力。Accordion 组件源码目录官方文档 accordion.md受控模式官方示例 ControlledAccordions【免费下载链接】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 个场景搭好 FAQ、目录与层级内容【免费下载链接】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就是干这件事的内容默认收起用户点击才展开把内容墙变成可自主浏览的层级结构。它由 4 个小组件协作完成下面按真实使用场景逐个拆开讲。3 分钟搭出基础折叠面板 ⚡四个组件各管一段分工很清楚Accordion最外层容器管理开合状态并通过 Context 把状态和切换函数下发给子组件见 Accordion 源码。AccordionSummary可点击的标题行本质是个带aria-expanded的按钮。AccordionDetails正文区域内部套在Collapse过渡容器里所以展开收起自带高度动画。AccordionActions可选在面板底部放一排操作按钮比如取消/同意。导入和最小用法一次看完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 ExpandMoreIcon from mui/icons-material/ExpandMore; Accordion AccordionSummary expandIcon{ExpandMoreIcon /} Typography配送说明/Typography /AccordionSummary AccordionDetails Typography正文区域可放任意 React 组件/Typography /AccordionDetails /Accordion记住一条约束Accordion 的第一个子元素必须是 AccordionSummary源码里会校验。不需要按钮的话AccordionActions 整块删掉即可。受控模式实现一次只展开一个折叠面板FAQ 页最常见的诉求是打开第二个问题面板时第一个自动收起来。这要用受控模式——不写defaultExpanded改用expandedonChange状态上提到父组件。核心是存当前打开的面板 id而不是布尔值const [expanded, setExpanded] useState(false); const handleChange (panel) (event, isExpanded) setExpanded(isExpanded ? panel : false); Accordion expanded{expanded faq1} onChange{handleChange(faq1)} AccordionSummary expandIcon{ExpandMoreIcon /} Typography如何修改收货地址/Typography /AccordionSummary AccordionDetails Typography……/Typography /AccordionDetails /Accordion // 其余面板同构只替换 id 与文案handleChange(faq1)这种柯里化写法避免给每个面板单独定义事件函数。官方仓库里有一份完整实现可对照ControlledAccordions 示例。反过来如果业务允许多个面板同时展开如全部展开按钮就不必受控每个面板各管各的状态即可。嵌套折叠面板示例文档目录与设置中心的层级结构文档目录、设置中心这类大类套小类的结构直接往 AccordionDetails 里再嵌一层 Accordion 就行没有任何特殊 APIAccordion defaultExpanded {/* 外层主面板 */} AccordionSummary Typography订单管理/Typography /AccordionSummary AccordionDetails Accordion {/* 直接再嵌一个 Accordion */} AccordionSummary Typography物流追踪/Typography /AccordionSummary AccordionDetails Typography子面板正文/Typography /AccordionDetails /Accordion /AccordionDetails /Accordion嵌套面板的间距靠外层margin撑开层级一多会显得松散给子级面板加disableGutters可以收紧间距。另外注意标题默认渲染成h3嵌套时用slotProps{{ heading: { component: h4 } }}调整层级避免文档里出现两个同级标题。细节打磨defaultExpanded、disabled 与 unmountOnExit 性能优化按解决什么问题来记这几个属性defaultExpanded首屏就该露出的关键信息如重要提示不必让用户多点一次。注意它只定初始值之后面板不受控和expanded二选一。disabled面板置灰且不可聚焦适合该功能未开通这类占位项。expandIcon换个箭头图标旋转动画组件自动处理不用自己写 transform。unmountOnExit这是唯一值得专门说的性能项。默认情况下内容即使收起也挂载在 DOM 里——这是有意为之利于 SSR 和 SEO。但当你一屏放十几个面板、或正文里塞了重量级组件图表、数据网格时首屏渲染成本会明显上升。把过渡容器换成收起即卸载Accordion slotProps{{ transition: { unmountOnExit: true } }} /代价是展开时重新执行挂载逻辑纯文本面板保持默认即可。最后是 ARIAWAI-ARIA 规范要求标题和内容互相指向。只需在 AccordionSummary 上补一对属性Accordion 会自动推导其余链接关系AccordionSummary idfaq-1-header aria-controlsfaq-1-contentid 建议用React.useId()生成保证动态渲染下唯一。折叠面板资源索引Accordion 的四个组件都很薄开合逻辑、过渡和 ARIA 推导都集中在容器组件里读源码不费力。Accordion 组件源码目录官方文档 accordion.md受控模式官方示例 ControlledAccordions【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
