Acordeão
Os acordeões contêm fluxos de criação e permitem a edição simplificada de um elemento.
Um acordeão é um contêiner leve que pode estar sozinho ou conectado em uma superfície maior, como um cartão.
Nota: Os acordeões não estão mais documentados nas diretrizes do Material Design, mas o Material-UI continuará a suportá-los. Anteriormente, ele era formalmente conhecido como "painel de expansão".
Acordeão simples
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
Acordeão controlado
Estenda o comportamento padrão para criar um acordeão customizado com o componente 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.
Acordeões 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 AccordionSummary, 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 acordeão.
The click event of the nested action will propagate up and expand the accordion unless you explicitly stop it.
The focus event of the nested action will propagate up and also focus the accordion 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 accordion expansion.
Performance
O conteúdo dos acordeões é montado por padrão, mesmo que o acordeão 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 acordeão ou simplesmente renderizar muitos acordeões, pode ser uma boa ideia desabilitar esse comportamento padrão habilitando unmountOnExit em TransitionProps:
<Accordion 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 acordeão para ajudar o usuário.
Acessibilidade
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)
Para melhor acessibilidade recomendamos a definição do id e aria-controls no AccordionSummary. O Accordion irá derivar os valores de aria-labelledby e id para a região de conteúdo do acordeão.