Accordéon (Panneau d'extension)

L'accordéon contient le flux de création et permet la modification légère de ses éléments.

Un accordéonn est un conteneur léger pouvant être autonome ou connecté à une surface plus grande, telle qu'une carte.

Note: Le panneau d'expansion n'est plus documenté dans le Material Design guidelines, mais Material-UI continue le support. Il était précédemment connus sous le nom de panneau d'expansion.

Accordéon simple

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

Accordéon contrôlé

Étendez le comportement du panneau par défaut pour créer un accordéon avec le composant 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.

Customiser l'accordéon

Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus dans la page de documentation des overrides.

Collapsible Group Item #1

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 #2

Collapsible Group Item #3

Actions supplémentaires

Pour pouvoir exécuter une action comme une Checkbox ou un bouton à l'intérieur du AccordionSummary, vous aurez besoin d'arrêter la propagation du focus et de l'évènement de clique sur l'accordéon à partir de l'expansion/réduction au moment de son utilisation. Vous devriez également fournir un aria-label pour l'action, autrement le label de l'action imbriquer sera inclus dans le label du bouton parent qui contrôle l'expansion de l'accordéon.

I acknowledge that I should stop the click event propagation

The click event of the nested action will propagate up and expand the accordion unless you explicitly stop it.

I acknowledge that I should stop the focus event propagation

The focus event of the nested action will propagate up and also focus the accordion unless you explicitly stop it.

I acknowledge that I should provide an aria-label on each action that I add

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.

Performances

Le contenu de l'accordéon est monter par défaut et se même si l'accordéon n'est pas ouvert. Se comportement à le "server-side rendrering" et le SEO comme objectif. Si vous devez rendre un lourd composant au niveau des détails de l'accordéon ou simplement rendre plusieurs accordéons, il serait une bonne idée de changer le comportement par défaut en activant le unmountOnExit dans le prop TransitionProps:

<Accordion TransitionProps={{ unmountOnExit: true }} />

Se n'est tout de même pas une solution miracle. Soyez sure de d'abord identifier les goulot d'étranglement et ensuite de considérer ses stratégies d'optimisation.

Titres et colonnes secondaire

Plusieurs colonnes peuvent être utilisées pour structurer le contenu et un texte d'assistance peut être ajouté a l'accordéon pour aider l'utilisateur.

Location

Select trip destination

Barbados

Select your destination of choice
Learn more

Accessibilité

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)

Pour une accessibilité optimal nous recommandons le paramètre id et aria-controls sur le AccordionsSummary. Accordion générera les nécessaires aria-labelledby et id pour le contenu régional de l'accordéon.