三步搭好Material-UI折叠面板从零到FAQ页与设置面板【免费下载链接】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 页和设置面板用户只点自己关心的页面自然就清爽了。先看看两种需要折叠面板的场景 场景一电商 FAQ 页。运费、支付、开票二十多个问答全部铺开页面就是一堵文字墙。拆成折叠面板后默认全部收起用户点哪个看哪个信息密度立刻可控。场景二应用设置面板。把设置项按基础通知隐私分成三个面板各自带操作按钮层级清晰滚动量也省了。这就是 React 里经典的手风琴交互右侧箭头旋转、内容滑入滑出动画全部内置你不用写一行动画代码。三步写出最小可用折叠面板 ⚡第一步导入三个核心组件和展开图标第二步按 Accordion、Summary、Details 的顺序嵌套第三步保存打开页面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; Accordion AccordionSummary expandIcon{ExpandMoreIcon /} 配送政策 /AccordionSummary AccordionDetails 全场满 99 元包邮7 天内可无理由取消订单。 /AccordionDetails /AccordionAccordion 是最外层容器Summary 是可点击的标题Details 是内容区expandIcon 就是那枚会旋转的箭头。这个结构是固定的复制即用就得到一个功能完整的折叠面板。常用属性配置速查 ️日常最常用的六个属性整理成下表其余属性按需查类型定义属性作用一行示例defaultExpanded默认展开即折叠面板默认展开Accordion defaultExpandeddisabled禁用展开折叠和焦点Accordion disabledexpandIcon换展开指示图标挂在 Summary 上expandIcon{ArrowDownwardIcon /}disableGutters去掉上下留白面板更紧凑Accordion disableGutterssquare去掉首尾默认圆角Accordion squareslotProps.transition调整展开过渡的参数slotProps{{ transition: { unmountOnExit: true } }}expanded和onChange是一对受控属性单独留到下一节讲。进阶一点受控状态与卸载内容 一次只展开一个面板。用useState记录当前谁展开新面板打开时自动把旧的收掉const [expanded, setExpanded] React.useState(p1); const toggle (key) (e, isExpanded) setExpanded(isExpanded ? key : false); return ( div Accordion expanded{expanded p1} onChange{toggle(p1)} AccordionSummary expandIcon{ExpandMoreIcon /}基础设置/AccordionSummary AccordionDetails基础设置内容/AccordionDetails /Accordion Accordion expanded{expanded p2} onChange{toggle(p2)} AccordionSummary expandIcon{ExpandMoreIcon /}高级设置/AccordionSummary AccordionDetails高级设置内容/AccordionDetails /Accordion /div );每个面板的expanded都从同一份状态推导多个面板天然互斥。这是 React 手风琴组件用法里最实用的模式。收起时卸载内容。默认情况下收起的面板内容仍然挂载在 DOM 里这是为 SSR 和 SEO 做的妥协。如果里面塞了重组件树改成展开时才挂载Accordion slotProps{{ transition: { unmountOnExit: true } }} /收起后内容直接从 DOM 移除展开时再挂载节点数和内存占用都更省。五个避坑清单Accordion 的第一个孩子必须是AccordionSummary不接受 FragmentDetails 放前面会直接报错。一旦传了expanded组件就变成受控模式不写onChange回写状态面板会点不动。标题默认是h3标签。页面标题层级因此错乱时用slotProps.heading.component换成h4等。想在内容下方放操作按钮用可选的AccordionActions别忘了导入它。嵌套折叠面板时把内层 Accordion 放进外层 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），仅供参考 三步搭好Material-UI折叠面板：从零到FAQ页与设置面板
三步搭好Material-UI折叠面板从零到FAQ页与设置面板【免费下载链接】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 页和设置面板用户只点自己关心的页面自然就清爽了。先看看两种需要折叠面板的场景 场景一电商 FAQ 页。运费、支付、开票二十多个问答全部铺开页面就是一堵文字墙。拆成折叠面板后默认全部收起用户点哪个看哪个信息密度立刻可控。场景二应用设置面板。把设置项按基础通知隐私分成三个面板各自带操作按钮层级清晰滚动量也省了。这就是 React 里经典的手风琴交互右侧箭头旋转、内容滑入滑出动画全部内置你不用写一行动画代码。三步写出最小可用折叠面板 ⚡第一步导入三个核心组件和展开图标第二步按 Accordion、Summary、Details 的顺序嵌套第三步保存打开页面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; Accordion AccordionSummary expandIcon{ExpandMoreIcon /} 配送政策 /AccordionSummary AccordionDetails 全场满 99 元包邮7 天内可无理由取消订单。 /AccordionDetails /AccordionAccordion 是最外层容器Summary 是可点击的标题Details 是内容区expandIcon 就是那枚会旋转的箭头。这个结构是固定的复制即用就得到一个功能完整的折叠面板。常用属性配置速查 ️日常最常用的六个属性整理成下表其余属性按需查类型定义属性作用一行示例defaultExpanded默认展开即折叠面板默认展开Accordion defaultExpandeddisabled禁用展开折叠和焦点Accordion disabledexpandIcon换展开指示图标挂在 Summary 上expandIcon{ArrowDownwardIcon /}disableGutters去掉上下留白面板更紧凑Accordion disableGutterssquare去掉首尾默认圆角Accordion squareslotProps.transition调整展开过渡的参数slotProps{{ transition: { unmountOnExit: true } }}expanded和onChange是一对受控属性单独留到下一节讲。进阶一点受控状态与卸载内容 一次只展开一个面板。用useState记录当前谁展开新面板打开时自动把旧的收掉const [expanded, setExpanded] React.useState(p1); const toggle (key) (e, isExpanded) setExpanded(isExpanded ? key : false); return ( div Accordion expanded{expanded p1} onChange{toggle(p1)} AccordionSummary expandIcon{ExpandMoreIcon /}基础设置/AccordionSummary AccordionDetails基础设置内容/AccordionDetails /Accordion Accordion expanded{expanded p2} onChange{toggle(p2)} AccordionSummary expandIcon{ExpandMoreIcon /}高级设置/AccordionSummary AccordionDetails高级设置内容/AccordionDetails /Accordion /div );每个面板的expanded都从同一份状态推导多个面板天然互斥。这是 React 手风琴组件用法里最实用的模式。收起时卸载内容。默认情况下收起的面板内容仍然挂载在 DOM 里这是为 SSR 和 SEO 做的妥协。如果里面塞了重组件树改成展开时才挂载Accordion slotProps{{ transition: { unmountOnExit: true } }} /收起后内容直接从 DOM 移除展开时再挂载节点数和内存占用都更省。五个避坑清单Accordion 的第一个孩子必须是AccordionSummary不接受 FragmentDetails 放前面会直接报错。一旦传了expanded组件就变成受控模式不写onChange回写状态面板会点不动。标题默认是h3标签。页面标题层级因此错乱时用slotProps.heading.component换成h4等。想在内容下方放操作按钮用可选的AccordionActions别忘了导入它。嵌套折叠面板时把内层 Accordion 放进外层 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），仅供参考