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/WAI/ARIA/apg/patterns/accordion/)
为了获得最佳的无障碍设计，我们建议在 AccordionSummary 上设置 id 和 aria-controls。 Accordion 将为扩展面板的内容区域派生必需的 aria-labelledby 和 id。