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。