Accordion 扩展面板
扩展面板是一个展示内容文本的组件，用户可以显示/隐藏文本内容。
扩展面板是一个轻量级容器，既可以单独使用，也可以和卡片这样更大的平面相结合。
注意： 扩展面板将不再记录在 Material Design 指南中，但 Material UI 将继续支持它。 它之前被称为 "expansion panel（扩展面板）"。
简单的扩展面板
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Accordion 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Disabled Accordion
General settings
I am an accordion
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
Users
You are currently not an owner
Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.
Advanced settings
Filtering has been entirely disabled for whole web server
Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.
Personal data
Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.
自定义的扩展面板
以下是自定义扩展面板的一个示例。 您可以在 重写文档页面 中了解更多。
Collapsible Group Item #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Collapsible Group Item #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
性能
即使扩展面板不是展开状态，默认情况下扩展面板的内容也会被挂载。 这样的默认情况是是考虑到了服务端渲染（server-side rendering）和搜索引擎优化（SEO）。 如果您在扩展面板中渲染组件树性能开销很大，或者只是想要渲染很多不带内容的扩展面板，那么通过启用 TransitionProps 中的 unmountOnExit 来改变默认的渲染方式也许可行。
<Accordion TransitionProps={{ unmountOnExit: true }} />
不过对所有情况下的性能优化，这并不是灵丹妙药。 一定要先确定哪些地方存在瓶颈，然后再尝试这些优化策略。
无障碍设计
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)
为了获得最佳的无障碍设计，我们建议在 AccordionSummary 上设置 id 和 aria-controls。 Accordion 将为扩展面板的内容区域派生必需的 aria-labelledby 和 id。