Widget Accordion (Accordéon)

Le widget Accordion (Accordéon) est un conteneur de mise en page qui sert à organiser d’autres widgets dans un menu empilé verticalement. Chaque widget placé dans un widget Accordion (Accordéon) devient un en-tête à l’état développé et réduit. Vous pouvez personnaliser les en-têtes, les boutons de développement et de réduction, ainsi que les volets de widget.

Exemples

Utilisez ce widget pour prendre en charge les exigences de conception d’application, telles que les suivantes :

• Vous voulez organiser des éléments tels que du texte, des légendes et des listes de couches.
• Vous voulez économiser de l’espace sur les pages de l’application où il n‘est pas nécessaire que la totalité du contenu soit visible simultanément.
• Vous voulez afficher des titres et permettre aux utilisateurs de choisir s’ils veulent développer et afficher davantage d’informations.

Remarques sur l’utilisation

Lorsque vous ajoutez un widget Accordion (Accordéon), le menu Quick style (Style rapide) s’affiche. Vous pouvez choisir parmi quatre styles par défaut. Les principales différences entre ces quatre styles sont la forme et le contenu des en-têtes. Vous pouvez personnaliser tous ces éléments dans les paramètres du widget.

Pour ajouter des widgets à l’accordéon, faites-les glisser depuis le volet Insert widget (Insérer un widget).

Vous pouvez réorganiser les widgets dans l’accordéon en cliquant dessus et en les faisant glisser à l’aide de leurs en-têtes. Vous pouvez également cliquer sur un widget et utiliser les boutons Move down (Descendre) et Move up (Remonter) qui apparaissent sur la barre d’outils du widget.

Pour supprimer un widget de l’accordéon, cliquez sur son en-tête et faites-le glisser à l’extérieur.

Pour modifier l’icône et le nom d’un widget dans l’en-tête, sélectionnez le widget et modifiez l’icône et le nom en haut du volet de configuration du widget.

Paramètres

Le widget Accordion (Accordéon) inclut les paramètres suivants :

• Layout (Mise en page) : ces paramètres influent sur l’espacement des éléments d’en-tête entre eux et par rapport aux bords du volet du widget Accordion (Accordéon).
  • Gap (Écart) : définissez l’espace vertical entre les en-têtes en pixels (px).
  • Padding (Marge intérieure) : changez la taille des espaces de remplissage, qui sont les espaces entre les en-têtes et les bords du volet des widgets, en une fois ou individuellement. Vous pouvez spécifier les valeurs de taille en pixels (px).
• General settings (Paramètres généraux) : il s’agit des paramètres liés au développement des en-têtes.
  • How many items can be expanded (Nombre maximal d’éléments développés) : choisissez si les utilisateurs peuvent développer un seul ou plusieurs en-têtes à la fois.
  • Expand items on loading (Développer les éléments au chargement) : choisissez éventuellement un ou plusieurs widgets qui seront développés automatiquement lors du chargement initial du widget.
  • Boutons Expand/Collapse all (Développer/réduire tout) : ajoutez des boutons au volet des widgets, qui permettent de développer et de réduire tous les en-têtes.
• Header (En-tête) : vous pouvez cliquer sur les trois parties différentes de l’éditeur d’en-tête pour afficher les paramètres relatifs à l’arrière-plan et à la bordure, à la marge intérieure et au contenu.

  

  • Background and border (Arrière-plan et bordure) : modifiez les paramètres relatifs à l’arrière-plan et à la bordure de l’en-tête.
    • Background (Arrière-plan) : choisissez les couleurs d’arrière-plan lorsque les en-têtes sont réduits ou développés.
    • Border (Bordure) : modifiez la couleur de remplissage, le trait et la taille de la bordure de l’en-tête en pixels (px). Vous pouvez modifier tous ces attributs pour l’ensemble de la bordure ou pour les quatre côtés individuellement.
      • Border radius (Rayon de bordure) : modifiez la longueur des rayons de la bordure, en une fois ou individuellement pour les quatre côtés. Vous pouvez spécifier les valeurs de rayon en pixels (px) ou en pourcentage (%). Définissez un rayon plus grand pour que les angles de l’en-tête soient plus arrondis.
  • Padding (Marge intérieure) : changez la taille des espaces de remplissage, qui sont les espaces entre les quatre bords de l’en-tête et son contenu, en une fois ou individuellement. Vous pouvez spécifier les valeurs en pixels (px).
  • Content (Contenu) : modifiez les paramètres relatifs au contenu des en-têtes.
    • Icon (Icône) : incluez des icônes de widget dans les en-têtes. Vous pouvez modifier la taille des icônes ainsi que leur couleur. Vous pouvez définir des icônes de widget en haut du panneau de configuration de chaque widget.

      Remarque :

      Si vous chargez des icônes personnalisées, vous ne pourrez peut-être pas modifier leur couleur à l’aide de ce paramètre.

    • Text (Texte) : appliquez une mise en forme gras, italique, barré ou souligné au texte des en-têtes. Vous pouvez également changer la couleur de police et définir la taille de police en pixels (px).
    • Buttons (Boutons) : définissez les icônes des boutons de développement et de réduction.
    • Toggle position (Position du bouton d’activation/de désactivation) : choisissez où placer les boutons de développement et de réduction, soit à gauche (Start [Début]), soit à droite (End [Fin]) de chaque en-tête.
• Panel (Volet) : modifiez les paramètres relatifs aux volets des widgets, qui sont les volets que vous ouvrez et fermez à l’aide des boutons de développement et de réduction.
  • Padding (Marge intérieure) : changez la taille des espaces de remplissage, qui sont les espaces entre le contenu du widget et les quatre bords du volet des widgets, en une fois ou individuellement. Vous pouvez spécifier les valeurs de taille en pixels (px).
  • Fill (Remplissage) : choisissez une couleur de remplissage pour les volets de widget.
  • Border (Bordure) : modifiez la couleur de remplissage, le trait et la taille de la bordure du volet en pixels (px). Vous pouvez modifier tous ces attributs pour l’ensemble de la bordure ou pour les quatre côtés individuellement.
    • Border radius (Rayon de bordure) : modifiez la longueur des rayons de la bordure, en une fois ou individuellement pour les quatre côtés. Vous pouvez spécifier les valeurs de rayon en pixels (px) ou en pourcentage (%). Définissez un rayon plus grand pour que les angles du volet soient plus arrondis.