Expansion Panel (Painel de Expansão)
Os painéis de expansão contêm fluxos de criação e permitem a edição simplificada de um elemento.
Um painel de expansão é um contêiner leve que pode estar sozinho ou conectado em uma superfície maior, como um cartão.
Nota: Os painéis de expansão não estão mais documentados nas diretrizes do Material Design, mas o Material-UI continuará a suportá-los.
Painel de Expansão Simples
Expansion Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Expansion Panel 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Disabled Expansion Panel
Acordeão Controlado
Estenda o comportamento padrão do painel para criar um acordeão com o componente ExpansionPanel.
General settings
I am an expansion panel
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.
Painéis de Expansão Customizados
Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.
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.
Ações adicionais
Para colocar uma ação como um Checkbox ou um botão dentro do ExpansionPanelSummary, você precisa parar a propogação do foco e eventos de clique para previnir o painel de expandir/colapsar quando usar a ação. Você deve fornecer também um aria-label para a ação, caso contrário, o rótulo da ação aninhada será incluído no rótulo do botão pai que controla a expansão do painel.
The click event of the nested action will propagate up and expand the panel unless you explicitly stop it.
The focus event of the nested action will propagate up and also focus the expansion panel unless you explicitly stop it.
If you forget to put an aria-label on the nested action, the label of the action will also be included in the label of the parent button that controls the panel expansion.
Performance
O conteúdo dos painéis de expansão é montado por padrão, mesmo que o painel não esteja expandido. Esse comportamento padrão tem em mente a renderização do lado do servidor e o SEO. Se você renderizar grandes árvores de componentes dentro de seu painel ou simplesmente renderizar muitos painéis, pode ser uma boa ideia desabilitar esse comportamento padrão habilitando unmountOnExit em TransitionProps:
<ExpansionPanel TransitionProps={{ unmountOnExit: true }} />Como acontece com qualquer otimização de desempenho, isso não é uma bala de prata. Certifique-se de identificar gargalos primeiro e, em seguida, experimente essas estratégias de otimização.
Cabeçalho Secundário e Colunas
Várias colunas podem ser usadas para estruturar o conteúdo, e um texto auxiliar pode ser adicionado ao painel para ajudar o usuário.
Acessibilidade
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)
Para melhor acessibilidade recomendamos a definição de id e aria-controles no ExpansionPanelSummary. O ExpansionPanel irá derivar os valores de aria-labelledby e id para a região de conteúdo do painel.