尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
Material-UI 折叠面板实战:3 个场景搭好 FAQ、目录与层级内容
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),仅供参考
RELATED

相关推荐

百度大搜与度秘面经:搜索与对话AI技术栈全解析

百度大搜与度秘面经:搜索与对话AI技术栈全解析

百度大搜和度秘面经先说下背景。去年秋招我把目标锁定在百度,投递时同时选了“大搜索”和“度秘”两个方向,后来都走完了面试流程,也拿到了其中之一的录用意向。回头看这段经历,最大的感受是:这两个部门虽然同属一家公…

📅 2026/9/3 12:46:34
24GB显卡跑DeepSeek-V3:INT4/8量化部署完整指南(附实测数据)

24GB显卡跑DeepSeek-V3:INT4/8量化部署完整指南(附实测数据)

24GB显卡跑DeepSeek-V3:INT4/8量化部署完整指南(附实测数据) 【免费下载链接】DeepSeek-V3 项目地址: https://gitcode.com/GitHub_Trending/de/DeepSeek-V3 DeepSeek-V3 有 671B 参数,官方只提供 FP8 权重,原…

📅 2026/10/19 13:52:34
从一块钱订单看补贴背后的成本黑洞与算账方法

从一块钱订单看补贴背后的成本黑洞与算账方法

你花一块钱,巨头补贴五块六,也盖不住几千块成本黑洞,这句话看起来像一句夸张的吐槽,但实际上把互联网平台补贴战的底牌掀开了一半。真正要看的不是那一块钱的订单有多便宜,也不是那五块六的补贴有多豪横,而…

📅 2026/9/8 5:28:29
MORE NEWS

更多资讯

📰

焊接类电工证怎么考?内部消息教你避坑不花冤枉钱

焊接类电工证怎么考?内部消息教你避坑不花冤枉钱 怕考不过白交培训费?现在就给你透露内部消息,焊接类电工证怎么考、怎么避坑,一步到位,省心又省钱! ### 焊接类电工证能干啥?别被忽悠了!…

📰

泊头市电工证查询系统怎么用?官方报名入口在这儿,别再被中介忽悠了

泊头市电工证查询系统怎么用?官方报名入口在这儿,别再被中介忽悠了 不知道去哪报名怕被中介坑?现在你打开【泊头市电工证查询系统】,就能清楚看到自己的证书状态,还能找到 官方报名入口…

📰

东莞电工证查询网上报名入口在哪考?特种作业证找工作必备

东莞电工证查询网上报名入口在哪考?特种作业证找工作必备 你是不是还在为找工作四处奔波?别忘了, 特种作业证 可是很多岗位的“敲门砖”。尤其像电工证这种证书, 在哪考…

📰

特种作业特种操作证官方回应:实操考试心里没底怕挂科?这样准备稳了

特种作业特种操作证官方回应:实操考试心里没底怕挂科?这样准备稳了 实操考试心里没底怕挂科,这是很多准备考取 特种作业特种操作证…

📰

广州的电工证图片怎么拍?考前押题帮你稳过实操

广州的电工证图片怎么拍?考前押题帮你稳过实操 实操考试心里没底怕挂科,特别是看到【广州的电工证图片】满屏都是各种“合格”“通过”“实操”等关键词,你是不是也在担心自己拍的图片是否符合标准?别急,下面这些干货,帮你搞定实操考试的每个环节。…

📰

南京中级电工证补贴考前押题怎么找?证书过期了不知道怎么复审延期

南京中级电工证补贴考前押题怎么找?证书过期了不知道怎么复审延期 证书过期了不知道怎么复审延期?很多人在拿到中级电工证后,可能因为工作忙碌或对政策不了解,忽略了证书的有效期。南京中级电工证补贴政策虽然对持证人有经济支持,但前提是证书在有效期内…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬