# Groupe

> Découvrez comment utiliser le composant Groupe dans PandaSuite pour gérer interactivités, animations et responsive design. Apprenez à grouper et dégrouper des objets, redimensionner des groupes et créer des animations.

https://docs.pandasuite.com/fr/essentials/components/group/

**Regroupez vos objets à l'aide du Groupe pour associer une même interactivité, créez une animation ou gérer le responsive.**

Au lieu d'avoir une multitude d'objets indépendants (images, zone de texte...), créez des groupes et structurez la gestion de vos objets en termes d'interactivité, d'animation et de responsive. Regroupez les éléments qui partagent une même responsabilité, ceux qui bougent, se redimensionnent et réagissent ensemble : le groupe les maintient cohérents comme une unité, au lieu de laisser chaque objet s'adapter de son côté.

Un Groupe est un conteneur qui inclut un ou plusieurs objets. Les objets "enfants" se trouvent à l'intérieur du groupe (il y a une notion de profondeur) et leurs comportements dépendent aussi de ses [paramètres Taille & Position Dynamiques](https://docs.pandasuite.com/fr/essentials/layout/responsive-design/).

## Grouper plusieurs objets

> **Info**
>
> Astuce : Pour grouper plusieurs objets ensemble, sélectionnez ces objets et
> tapez sur Cmd + G sur Mac (ou Control + G sur Windows).

Vous pouvez également ajouter un groupe depuis la fenêtre des **Composants**. Pour éditer le contenu d'un groupe, double-cliquez sur la zone ou cliquez sur la flèche dans la liste des Objets.

[Vidéo : un cadre de sélection autour de quatre vignettes de plantes, Cmd + G les groupe, puis la flèche de la liste des objets ouvre le groupe]

## Dégrouper des objets

Vous pouvez dégrouper des objets en tapant Shift + Cmd + G sur Mac ou Shift + Control + G sur Windows.

## Redimensionner un Groupe

Par défaut, le groupe ne redimensionne pas son contenu. Si vous agrandissez le Groupe, il vous faut agrandir manuellement les éléments à l'intérieur. Vous pouvez activer l'option pour redimensionner son contenu : l'icône se trouve dans le panneau **Propriétés** (section **Layout**, ligne **Responsive**), à côté de l'icône **Taille & Position Dynamiques**. Ce redimensionnement s'appuie sur les [Taille & Position Dynamiques](https://docs.pandasuite.com/fr/essentials/layout/responsive-design/) des objets à l'intérieur du Groupe.

[Image : Propriétés d'un Groupe de quiz : sur la ligne Responsive, l'icône Auto Layout Children, à côté de Taille & Position Dynamiques, est encadrée]

## Animer & Masquer le contenu d'un Groupe

Un des avantages du Groupe est de masquer (cropper) son contenu. Vous pouvez ainsi créer des effets d'apparition à l'aide d'un [composant Multi-état.](https://docs.pandasuite.com/fr/essentials/components/multi-state/)

Pour masquer un groupe, insérez le contenu, ressortez du groupe et utilisez les poignées pour réduire la taille du Groupe. Pour réaliser un drop-down menu, créez un premier état où le groupe est réduit (à 0, ou jusqu'à son seul bouton comme ci-dessous) et dans le deuxième état agrandissez le Groupe. Réalisez le changement d'état au clic sur le bouton.

[Vidéo : dans un Multi-état, le groupe du menu ne montre que son bouton All gardens à l'état 1 « closed », et les quatre jardins à l'état 2 « open »]

[Vidéo : un clic sur la flèche du bouton Une qualité de vie déroule un menu de quatre choix sur une carte, puis un autre clic le replie]

Aperçu du résultat