{"id":124621,"date":"2018-02-22T16:17:35","date_gmt":"2018-02-22T15:17:35","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/dynamic-panels\/"},"modified":"2025-02-03T16:43:43","modified_gmt":"2025-02-03T15:43:43","slug":"dynamic-panels","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/dynamic-panels","title":{"rendered":"Panneaux dynamiques"},"content":{"rendered":"<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781862315\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Les panneaux dynamiques sont des widgets qui peuvent contenir d&rsquo;autres \u00e9l\u00e9ments dans vos prototypes. Ce sont des sortes de mini-canvas dans lesquelles vous pouvez placer des \u00e9l\u00e9ments et passer d&rsquo;un \u00e9l\u00e9ment \u00e0 l&rsquo;autre lorsque vous simulez votre prototype. Vous pouvez les utiliser pour masquer des \u00e9l\u00e9ments et afficher diff\u00e9rents contenus dans la m\u00eame zone de l&rsquo;\u00e9cran, comme des onglets de navigation et des fen\u00eatres contextuelles. <video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" tab-nav-1.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\"><br \/>\nPanneaux dynamiques<\/video><br \/>\nChaque panneau dynamique contient un panneau par d\u00e9faut, mais vous pouvez en ajouter d&rsquo;autres une fois que vous en avez ajout\u00e9 un au canevas. Vous ne pourrez visualiser qu&rsquo;un seul panneau \u00e0 la fois. <\/p>\n<h2><a id=\"create-dynamic-panel\"><\/a>Cr\u00e9er un panneau dynamique<\/h2>\n<p>Vous trouverez les panneaux dynamiques dans le menu d\u00e9roulant de la barre d&rsquo;outils sous \u00ab\u00a0Contenu dynamique\u00a0\u00bb ou en appuyant sur la touche <kbd>D.<\/kbd><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43745\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Find-dynamic-panel.png\" alt=\"Un panneau dynamique sur le canevas. Vous le trouverez dans la barre d'outils sous Contenu dynamique.\" width=\"1274\" height=\"752\"><br \/>\nUne fois que vous en avez plac\u00e9 un sur le canevas, vous remarquerez un menu flottant \u00e0 c\u00f4t\u00e9. Vous pouvez ajouter d&rsquo;autres panneaux en cliquant sur le bouton \u00ab\u00a0+\u00a0\u00bb dans le menu. Vous pouvez \u00e9galement utiliser ce menu ou la palette des calques pour revenir \u00e0 l&rsquo;affichage et \u00e0 la modification de vos autres panneaux.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/floating-menu-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" floating-menu-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/floating-menu-panel.png\" alt=\"Panneau de menu flottant\"><br \/>\nPanneau de menu flottant<\/video><\/p>\n<h2><a id=\"add-move-delete-elements\"><\/a>Ajouter, d\u00e9placer et supprimer des \u00e9l\u00e9ments<\/h2>\n<h3>Ajouter des \u00e9l\u00e9ments \u00e0 un panneau<\/h3>\n<h4>Utiliser les touches Commande\/Contr\u00f4le<\/h4>\n<p>Vous pouvez placer des \u00e9l\u00e9ments dans un panneau dynamique en maintenant la touche <kbd>Commande<\/kbd> (Mac) ou <kbd>Contr\u00f4le<\/kbd> (Windows) enfonc\u00e9e et en faisant glisser un \u00e9l\u00e9ment ou un groupe d&rsquo;\u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur. Le panneau se teinte en bleu lorsque vous y ajoutez un \u00e9l\u00e9ment.   <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742273855\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h4>Cliquez avec le bouton droit de la souris<\/h4>\n<p>S\u00e9lectionnez un \u00e9l\u00e9ment ou un groupe d&rsquo;\u00e9l\u00e9ments, cliquez avec le bouton droit de la souris, allez dans Groupe, puis s\u00e9lectionnez \u00ab\u00a0Grouper dans un panneau dynamique\u00a0\u00bb. Tous les \u00e9l\u00e9ments que vous avez s\u00e9lectionn\u00e9s se trouvent d\u00e9sormais dans un panneau dynamique.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43753\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Right-click-group-panel.png\" alt=\"S\u00e9lectionnez des \u00e9l\u00e9ments sur le canevas et cliquez avec le bouton droit de la souris pour les regrouper dans un panneau dynamique.\" width=\"1066\" height=\"621\"><\/p>\n<h3>D\u00e9placer et supprimer des \u00e9l\u00e9ments dans un panneau<\/h3>\n<p>Activez l&rsquo;outil de s\u00e9lection directe en appuyant sur la touche <kbd>A<\/kbd> ou en le choisissant dans la barre d&rsquo;outils. L&rsquo;outil de s\u00e9lection directe vous permet de choisir rapidement un \u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un panneau dynamique ou d&rsquo;un groupe. Vous pouvez ensuite d\u00e9placer cet \u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur du panneau ou le placer en dehors de la zone du panneau pour l&rsquo;en retirer.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43751\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/08\/Direct-selection-tool-1.png\" alt=\"Utilisez la touche A pour activer l'outil de s\u00e9lection directe.\" width=\"1106\" height=\"644\"><br \/>\nRevenez \u00e0 la s\u00e9lection normale en appuyant sur la touche <kbd>V.<\/kbd> <\/p>\n<h2><a id=\"duplicate-remove-panels\"><\/a>Dupliquer et supprimer des panneaux<\/h2>\n<p>Vous pouvez dupliquer un panneau et les \u00e9l\u00e9ments qu&rsquo;il contient en cliquant avec le bouton droit de la souris sur un panneau et en s\u00e9lectionnant \u00ab\u00a0Dupliquer le panneau\u00a0\u00bb. Pour supprimer un panneau, cliquez dessus avec le bouton droit de la souris et s\u00e9lectionnez \u00ab\u00a0Supprimer le panneau\u00a0\u00bb. Notez que tous les \u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur de ce panneau seront \u00e9galement supprim\u00e9s.<\/p>\n<h2><a id=\"default-panel\"><\/a>Le panneau par d\u00e9faut<\/h2>\n<p>Chaque panneau dynamique a un panneau par d\u00e9faut, le panneau 1, qui s&rsquo;affichera en premier lorsque vous simulerez votre prototype. Pour qu&rsquo;un autre panneau devienne le panneau par d\u00e9faut, proc\u00e9dez comme suit<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/the-default-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" the-default-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/the-default-panel.png\" alt=\"Le panneau par d\u00e9faut\"><br \/>\nLe panneau par d\u00e9faut<\/video><\/p>\n<ol>\n<li>S\u00e9lectionnez le panneau dynamique<\/li>\n<li>Acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s<\/li>\n<li>S\u00e9lectionnez un autre panneau dans la liste d\u00e9roulante \u00ab\u00a0Panneau par d\u00e9faut\u00a0\u00bb.<\/li>\n<\/ol>\n<h2><a id=\"events-with-panels\"><\/a>\u00c9v\u00e9nements avec panels<\/h2>\n<h3>D\u00e9finir le panneau actif<\/h3>\n<p>Si vous pouvez utiliser le menu flottant pour passer d&rsquo;un panneau \u00e0 l&rsquo;autre pendant l&rsquo;\u00e9dition, vous devez utiliser l&rsquo;action <strong>D\u00e9finir le panneau actif<\/strong> pour passer d&rsquo;un panneau \u00e0 l&rsquo;autre pendant la simulation. Choisissez un d\u00e9clencheur pour d\u00e9marrer l&rsquo;\u00e9v\u00e9nement (en cliquant sur un bouton, par exemple), puis trouvez l&rsquo;action <strong>D\u00e9finir le panneau actif<\/strong> dans le menu d\u00e9roulant Actions. Une fois que vous l&rsquo;avez s\u00e9lectionn\u00e9e, vous verrez l&rsquo;aper\u00e7u du canevas, dans lequel vous pouvez s\u00e9lectionner le panneau sur lequel vous souhaitez basculer (le d\u00e9finir comme actif). Vous trouverez peut-\u00eatre plus facile de s\u00e9lectionner le panneau dans la palette de dialogue Calques.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43755\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Select-active-panel.png\" alt=\"Choisissez l'action D\u00e9finir le panneau actif et choisissez un panneau \u00e0 d\u00e9finir comme actif.\" width=\"1156\" height=\"679\"><\/p>\n<h3>Sur panneau actif<\/h3>\n<p>Vous pouvez cr\u00e9er des \u00e9v\u00e9nements qui se d\u00e9clenchent chaque fois que vous passez \u00e0 un panneau sp\u00e9cifique avec le d\u00e9clencheur <strong>On Panel Active<\/strong>. <strong>Le d\u00e9clencheur On Panel Active<\/strong> est utile pour cr\u00e9er des \u00e9v\u00e9nements r\u00e9p\u00e9titifs, tels que des diaporamas et des comptes \u00e0 rebours. Par exemple, vous pouvez combiner les actions <strong>Pause<\/strong> avec les \u00e9v\u00e9nements <strong>On Panel Active<\/strong> + <strong>Set Active Panel<\/strong> pour cr\u00e9er un diaporama qui passera automatiquement d&rsquo;un panneau \u00e0 l&rsquo;autre.<\/p>\n<h2><a id=\"common-uses-for-panels\"><\/a>Utilisations courantes des panneaux dynamiques<\/h2>\n<p>Vous pouvez utiliser les panneaux dynamiques de diff\u00e9rentes mani\u00e8res : cr\u00e9ation de bo\u00eetes de dialogue de confirmation et de fen\u00eatres modales, de zones de d\u00e9filement, d&rsquo;en-t\u00eates flottants, de diaporamas, etc.  [all these will be linked]<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/panel-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" panel-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/panel-example.png\" alt=\"Utilisations courantes des panneaux dynamiques\"><br \/>\nUtilisations courantes des panneaux dynamiques<\/video><br \/>\nPassez \u00e0 l&rsquo;article suivant pour apprendre \u00e0 construire ces cas d&rsquo;utilisation courants.<\/p>\n<h2><a id=\"nav-tab-menu\"><\/a>Menus des onglets de navigation<\/h2>\n<p>Dans cet exemple, vous apprendrez \u00e0 cr\u00e9er des onglets de navigation et de menu avec des panneaux dynamiques. Vous utiliserez chaque onglet pour passer \u00e0 diff\u00e9rents panneaux dynamiques contenant des informations diff\u00e9rentes.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-nav-1.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" tab-nav-1.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-nav-1.png\" alt=\"Menus des onglets de navigation\">Menus des onglets de navigation<\/video><\/p>\n<h3>Design de l&rsquo;exemple<\/h3>\n<ol>\n<li>Faites glisser quatre \u00e9l\u00e9ments Rectangle sur le canevas, en les positionnant horizontalement sur le canevas pour qu&rsquo;ils correspondent \u00e0 l&rsquo;exemple. Il s&rsquo;agit des onglets de navigation entre lesquels vous basculerez. Donnez-leur le style que vous souhaitez et nommez-les \u00ab\u00a0Onglet 1\u00a0\u00bb, \u00ab\u00a0Onglet 2\u00a0\u00bb, \u00ab\u00a0Onglet 3\u00a0\u00bb et \u00ab\u00a0Onglet 4\u00a0\u00bb. Le rectangle de gauche (\u00ab\u00a0Onglet 1\u00a0\u00bb) sera l&rsquo;onglet s\u00e9lectionn\u00e9 par d\u00e9faut. Modifiez son arri\u00e8re-plan et la couleur de sa police pour qu&rsquo;il ait l&rsquo;air s\u00e9lectionn\u00e9.<\/li>\n<li>Faites glisser un autre rectangle sous les onglets et redimensionnez-le pour qu&rsquo;il soit plus grand. Ce rectangle servira de couche d&rsquo;arri\u00e8re-plan pour la fen\u00eatre affich\u00e9e par chaque onglet. <\/li>\n<li>Placez des \u00e9l\u00e9ments sur le rectangle pour cr\u00e9er le contenu de votre premi\u00e8re fen\u00eatre \u00e0 onglet.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43791\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tab-design.png\" alt=\"Design du contenu de la fen\u00eatre \u00e0 onglets\" width=\"1229\" height=\"714\"><\/li>\n<li>S\u00e9lectionnez le rectangle et les \u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur de la fen\u00eatre \u00e0 onglets, cliquez avec le bouton droit de la souris, allez dans le groupe et s\u00e9lectionnez \u00ab\u00a0Grouper dans un panneau dynamique\u00a0\u00bb. Tous les \u00e9l\u00e9ments, \u00e0 l&rsquo;exception des onglets sur le canevas, doivent maintenant se trouver \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un panneau dynamique. <\/li>\n<li>Cliquez avec le bouton droit de la souris sur le panneau et s\u00e9lectionnez \u00ab\u00a0Dupliquer le panneau\u00a0\u00bb. Dupliquez ce panneau deux autres fois jusqu&rsquo;\u00e0 ce qu&rsquo;il y ait quatre panneaux au total. <\/li>\n<li>Modifiez le contenu de la fen\u00eatre dans chaque panneau selon vos pr\u00e9f\u00e9rences.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43793\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tabs-four-panels.png\" alt=\"Dupliquez le panneau trois fois et personnalisez le contenu \u00e0 l'int\u00e9rieur.\" width=\"1434\" height=\"833\"><\/li>\n<\/ol>\n<h3>Cr\u00e9er les \u00e9v\u00e9nements<\/h3>\n<p>Vous devrez cr\u00e9er des \u00e9v\u00e9nements pour pouvoir passer d&rsquo;une fen\u00eatre \u00e0 l&rsquo;autre pendant la simulation.<\/p>\n<ol>\n<li>S\u00e9lectionnez le rectangle \u00ab\u00a0Tab One\u00a0\u00bb, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/li>\n<li>Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Set Active Panel<\/strong>, en s\u00e9lectionnant le panneau 1 comme actif. D\u00e9sormais, chaque fois que vous cliquerez sur \u00ab\u00a0Tab One\u00a0\u00bb, vous passerez au panneau 1. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43795\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tab-event-Panel1.png\" alt=\"Cr\u00e9ez un \u00e9v\u00e9nement \"on click and set active panel\", en d\u00e9finissant le panneau 1 comme actif.\" width=\"1306\" height=\"760\"><\/li>\n<li>Revenez \u00e0 la palette d&rsquo;\u00e9v\u00e9nements et cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb \u00e0 c\u00f4t\u00e9 de l&rsquo;action que vous venez de cr\u00e9er. Cr\u00e9ez un \u00e9v\u00e9nement On <strong>Click<\/strong> + <strong>Change Style<\/strong>, en s\u00e9lectionnant \u00ab\u00a0Tab One\u00a0\u00bb comme cible de l&rsquo;action. Pour les styles \u00e0 modifier, ajoutez les couleurs d&rsquo;arri\u00e8re-plan et de police. Laissez les couleurs par d\u00e9faut.\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742284426\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Cette action fait en sorte que l&rsquo;onglet 1 semble s\u00e9lectionn\u00e9 lorsque vous cliquez dessus.<\/li>\n<li>Ensuite, vous devez cr\u00e9er un \u00e9v\u00e9nement pour modifier le style des autres onglets afin qu&rsquo;ils paraissent non s\u00e9lectionn\u00e9s lorsque vous cliquez sur l&rsquo;onglet 1. Cliquez sur le bouton &lsquo;+&rsquo; \u00e0 c\u00f4t\u00e9 de l&rsquo;action que vous venez de cr\u00e9er et cr\u00e9ez un autre \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Change Style (<\/strong> <strong>Sur le clic<\/strong> + <strong>Changer le style)<\/strong>. S\u00e9lectionnez les trois autres onglets comme cibles de l&rsquo;action &#8211; vous pouvez utiliser la <kbd>touche Shift<\/kbd> pour effectuer une s\u00e9lection multiple. Ajoutez les couleurs d&rsquo;arri\u00e8re-plan et de police \u00e0 modifier, en laissant leur couleur par d\u00e9faut.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43798\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tab-multi-select-style.png\" alt=\"S\u00e9lectionnez les onglets deux, trois et quatre pour modifier le style et obtenir un aspect non s\u00e9lectionn\u00e9.\" width=\"1136\" height=\"660\"><\/li>\n<li>Cliquez sur le bouton \u00ab\u00a0copier\u00a0\u00bb en haut de la palette des \u00e9v\u00e9nements pour copier toutes les actions que vous avez cr\u00e9\u00e9es sur l'\u00a0\u00bbonglet un\u00a0\u00bb. Allez dans l'\u00a0\u00bbOnglet 2&Prime; et cliquez sur le bouton \u00ab\u00a0Coller\u00a0\u00bb pour les coller dans l'\u00a0\u00bbOnglet 2&Prime;. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-copy-paste.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" tab-copy-paste.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-copy-paste.png\" alt=\"Copier-coller\">Copier-coller<\/video><\/li>\n<li>Double-cliquez sur l&rsquo;action <strong>D\u00e9finir le panneau actif<\/strong> et changez le panneau actif de Panneau 1 \u00e0 Panneau 2.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-change-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" tab-change-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/tab-change-panel.png\" alt=\"Panneau de changement d'onglet\">Tab changez le panneau<\/video><\/li>\n<li>Double-cliquez sur l&rsquo;action <strong>Modifier le style<\/strong> qui modifie le style des onglets deux, trois et quatre. D\u00e9s\u00e9lectionnez \u00ab\u00a0Onglet deux\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0Onglet un\u00a0\u00bb pour qu&rsquo;il soit inclus dans l&rsquo;action. Les onglets un, trois et quatre doivent maintenant \u00eatre s\u00e9lectionn\u00e9s pour changer de style.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43804\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Tabs-style-select.png\" alt=\"S\u00e9lectionnez les panneaux un, trois et quatre pour modifier le style. D\u00e9s\u00e9lectionnez l'onglet deux.\" width=\"1219\" height=\"709\"><\/li>\n<li>R\u00e9p\u00e9tez les \u00e9tapes 5 \u00e0 8 jusqu&rsquo;\u00e0 ce que chaque onglet ait les actions correctes &#8211; c&rsquo;est-\u00e0-dire que cliquer sur \u00ab\u00a0Onglet trois\u00a0\u00bb d\u00e9finit le panneau 3 comme actif, change l&rsquo;onglet trois en s\u00e9lectionn\u00e9 et les onglets un, deux et quatre en non-s\u00e9lectionn\u00e9s.<\/li>\n<\/ol>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype. Cliquez sur l&rsquo;un des onglets pour passer d&rsquo;un panneau \u00e0 l&rsquo;autre et voyez comment l&rsquo;onglet change de style pour avoir l&rsquo;air s\u00e9lectionn\u00e9. <\/p>\n<h2><a id=\"confirmation-dialog\"><\/a>Dialogue de confirmation<\/h2>\n<p>Vous pouvez utiliser des panneaux dynamiques pour cr\u00e9er des messages d&rsquo;avertissement et des fen\u00eatres modales. Dans cet exemple, vous apprendrez \u00e0 cr\u00e9er une bo\u00eete de dialogue de confirmation \u00e0 l&rsquo;aide d&rsquo;un panneau dynamique et des actions D\u00e9finir le panneau actif.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/confirmation-dialog-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" confirmation-dialog-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/confirmation-dialog-example.png\" alt=\"Dialogue de confirmation\">Dialogue de confirmation<\/video><\/p>\n<h3>Design de l&rsquo;exemple<\/h3>\n<ol>\n<li>Concevez un prototype web ou mobile. Pour correspondre \u00e0 l&rsquo;exemple, cr\u00e9ez un prototype Android et placez quelques \u00e9l\u00e9ments Rectangle, Texte et Image sur l&rsquo;\u00e9cran. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43770\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Confirmation-add-elements.png\" alt=\"Ajouter du texte, des rectangles et des images au canevas\" width=\"1023\" height=\"593\"><\/li>\n<li>Placez un panneau dynamique sur le canevas, couvrant la totalit\u00e9 de l&rsquo;\u00e9cran. Vous pouvez le trouver dans la section Contenu dynamique de la barre d&rsquo;outils ou en appuyant sur la touche <kbd>D.<\/kbd>  <\/li>\n<li>Marquez le panneau dynamique comme \u00e9tant cach\u00e9 pendant la simulation en appuyant sur le bouton \u00ab\u00a0\u0153il\u00a0\u00bb dans la palette des propri\u00e9t\u00e9s.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43765\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-dynamic-panel.png\" alt=\"Cliquez sur le bouton \"\u0153il\" de la palette de propri\u00e9t\u00e9s pour masquer le panneau.\" width=\"950\" height=\"458\"><\/li>\n<li>Donnez au panneau dynamique un arri\u00e8re-plan noir avec une opacit\u00e9 de 40 %. Ce sera l&rsquo;arri\u00e8re-plan de la fen\u00eatre modale. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43769\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Background-modal.png\" alt=\"Changez le panneau dynamique pour un arri\u00e8re-plan sombre avec une opacit\u00e9 de 40 %.\" width=\"1024\" height=\"594\"><\/li>\n<li>Placez les \u00e9l\u00e9ments Rectangle et Texte \u00e0 l&rsquo;int\u00e9rieur du panneau dynamique pour cr\u00e9er la bo\u00eete de dialogue. Vous pouvez les placer dans le panneau en maintenant la <kbd>touche Commande<\/kbd> (Mac) ou <kbd>Contr\u00f4le<\/kbd> (Windows) enfonc\u00e9e et en faisant glisser les \u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur. Pour correspondre \u00e0 l&rsquo;exemple, cr\u00e9ez les textes \u00ab\u00a0Non\u00a0\u00bb et \u00ab\u00a0Oui\u00a0\u00bb.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43774\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Drag-elements-into-panel.png\" alt=\"Faites glisser un rectangle et des \u00e9l\u00e9ments de texte dans le panneau pour cr\u00e9er le dialogue.\" width=\"878\" height=\"466\"><\/li>\n<li>Cliquez avec le bouton droit de la souris sur le panneau dynamique et s\u00e9lectionnez \u00ab\u00a0Dupliquer le panneau\u00a0\u00bb. Vous devriez maintenant avoir un panneau dynamique avec deux sous-panneaux &#8211; Panneau 1 et Panneau 2. <\/li>\n<li>Personnalisez la bo\u00eete de dialogue de confirmation dans le panneau 2. Pour correspondre \u00e0 l&rsquo;exemple, n&rsquo;incluez qu&rsquo;un seul \u00e9l\u00e9ment de texte &#8211; \u00ab\u00a0OK\u00a0\u00bb<img decoding=\"async\" class=\"alignnone size-full wp-image-43772\" src=\"\" alt=\"\" width=\"\" height=\"\">. <\/li>\n<\/ol>\n<h3>Cr\u00e9er les \u00e9v\u00e9nements<\/h3>\n<ol>\n<li>S\u00e9lectionnez un \u00e9l\u00e9ment pour lequel vous souhaitez afficher la bo\u00eete de dialogue de confirmation. Pour correspondre \u00e0 l&rsquo;exemple, s\u00e9lectionnez une ic\u00f4ne \u00ab\u00a0X\u00a0\u00bb. Allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb. Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Tap<\/strong> + <strong>Show Hidden Element<\/strong>, en s\u00e9lectionnant le panneau dynamique \u00e0 afficher dans l&rsquo;aper\u00e7u du canevas. Ajoutez un effet de fondu et cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43787\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Confirmation-dialog-show.png\" alt=\"Choisissez l'option Afficher l'\u00e9l\u00e9ment cach\u00e9 et s\u00e9lectionnez le panneau dynamique \u00e0 afficher.\" width=\"1023\" height=\"595\"><\/li>\n<\/ol>\n<div><strong>Note :<\/strong> dans les prototypes Web, <strong>On Tap<\/strong> sera <strong>On Click.<\/strong><\/div>\n<ol>\n<li>Vous avez maintenant besoin d&rsquo;un \u00e9v\u00e9nement pour passer d&rsquo;un panneau \u00e0 l&rsquo;autre dans la bo\u00eete de dialogue de confirmation. S\u00e9lectionnez le texte \u00ab\u00a0Oui\u00a0\u00bb dans la bo\u00eete de dialogue, cr\u00e9ez un \u00e9v\u00e9nement <strong>On Tap<\/strong> + <strong>Set Active Panel<\/strong> et s\u00e9lectionnez le panneau 2 comme actif. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43789\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Confirmation-set-active-panel.png\" alt=\"D\u00e9finir le panneau 2 comme actif\" width=\"1023\" height=\"596\"><\/li>\n<li>\u00c9tant donn\u00e9 que vous pouvez \u00e9galement s\u00e9lectionner \u00ab\u00a0Non\u00a0\u00bb dans la bo\u00eete de dialogue de confirmation, vous devez cr\u00e9er un \u00e9v\u00e9nement pour masquer le panneau dynamique. S\u00e9lectionnez le texte \u00ab\u00a0Non\u00a0\u00bb et cr\u00e9ez un \u00e9v\u00e9nement <strong>On Tap<\/strong> + <strong>Hide<\/strong>, en s\u00e9lectionnant le panneau dynamique \u00e0 masquer avec un effet de fondu. <\/li>\n<li>Passez au panneau 2. S\u00e9lectionnez le texte \u00ab\u00a0OK\u00a0\u00bb et cr\u00e9ez un \u00e9v\u00e9nement <strong>On Tap<\/strong> + <strong>Hide<\/strong>, en s\u00e9lectionnant le panneau dynamique \u00e0 masquer avec un effet de fondu. <\/li>\n<\/ol>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype. Cliquez sur l&rsquo;ic\u00f4ne \u00ab\u00a0X\u00a0\u00bb et vous verrez appara\u00eetre la bo\u00eete de dialogue de confirmation. Cliquez sur le texte \u00ab\u00a0Non\u00a0\u00bb pour masquer la bo\u00eete de dialogue, ou sur le texte \u00ab\u00a0Oui\u00a0\u00bb pour passer au panneau suivant. Cliquez ensuite sur le texte \u00ab\u00a0OK\u00a0\u00bb pour masquer la bo\u00eete de dialogue.   <\/p>\n<h2><a id=\"drag-and-drop\"><\/a>Glisser-d\u00e9poser des \u00e9l\u00e9ments<\/h2>\n<p>En plus de fonctionner comme des mini-canvas, les panneaux dynamiques ont \u00e9galement des propri\u00e9t\u00e9s sp\u00e9ciales en tant que conteneurs. Cela signifie que vous pouvez y ins\u00e9rer des \u00e9l\u00e9ments pendant la simulation. Vous pouvez utiliser cette fonctionnalit\u00e9 pour glisser et d\u00e9poser des \u00e9l\u00e9ments entre deux panneaux dynamiques.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-event-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-event-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-event-example.png\" alt=\"Glisser-d\u00e9poser des \u00e9l\u00e9ments\">Glisser-d\u00e9poser des \u00e9l\u00e9ments<\/video><\/p>\n<h3>Design de l&rsquo;exemple<\/h3>\n<ol>\n<li>Ajoutez deux rectangles au canevas et redimensionnez-les jusqu&rsquo;\u00e0 ce qu&rsquo;ils atteignent la hauteur du canevas et environ la moiti\u00e9 de sa largeur. Ces rectangles serviront d&rsquo;arri\u00e8re-plan. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43813\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Drag-background-layers.png\" alt=\"Placez deux rectangles sur le canevas pour l'arri\u00e8re-plan.  \" width=\"1248\" height=\"726\"><\/li>\n<li>Placez un panneau dynamique sur le canevas. Acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s et s\u00e9lectionnez \u00ab\u00a0Vertical\u00a0\u00bb dans le menu d\u00e9roulant \u00ab\u00a0Disposition\u00a0\u00bb. Cela donnera au panneau une disposition verticale, ce qui signifie que les \u00e9l\u00e9ments que vous y placerez s&#8217;empileront les uns au-dessus et les autres.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43811\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Panel-vertical-layout.png\" alt=\"Modifiez la disposition verticale du panneau dans la palette de propri\u00e9t\u00e9s.\" width=\"1537\" height=\"902\"><\/li>\n<li>Toujours dans la palette Propri\u00e9t\u00e9s, modifiez l&rsquo;alignement du panneau dynamique en le centrant et ajoutez un espacement vertical.<\/li>\n<li>Dupliquez le panneau dynamique afin d&rsquo;avoir deux panneaux dynamiques diff\u00e9rents sur le Canvas. Placez un panneau \u00e0 gauche de l&rsquo;\u00e9cran et un autre \u00e0 droite. Redimensionnez chacun d&rsquo;eux jusqu&rsquo;\u00e0 ce qu&rsquo;ils occupent la totalit\u00e9 de la hauteur du canevas et la moiti\u00e9 de sa largeur.  <\/li>\n<li>Faites glisser quelques images ou ic\u00f4nes dans le panneau dynamique situ\u00e9 \u00e0 gauche. Vous remarquerez qu&rsquo;elles se mettent en place, empil\u00e9es les unes au-dessus et au-dessous des autres.<video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-images-in-panel.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Faire glisser des images dans le panneau<\/video> <\/li>\n<\/ol>\n<h3>Cr\u00e9er les \u00e9v\u00e9nements<\/h3>\n<ol>\n<li>Activez l&rsquo;outil de s\u00e9lection directe <kbd>A<\/kbd> pour s\u00e9lectionner l&rsquo;une des images du panneau dynamique de gauche. Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Drag<\/strong> + <strong>Move<\/strong>, en s\u00e9lectionnant cette image comme cible \u00e0 d\u00e9placer. Pour le mouvement, s\u00e9lectionnez &lsquo;With cursor&rsquo; pour les positions X (horizontale) et Y (verticale). D\u00e9sormais, cette image se d\u00e9placera avec votre souris lorsque vous la ferez glisser pendant la simulation.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43815\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Drag-move-with-cursor.png\" alt=\"Cr\u00e9ez un \u00e9v\u00e9nement \"glisser + d\u00e9placer\" et d\u00e9placez l'image avec le curseur.\" width=\"1636\" height=\"949\"><br \/>\nCliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de cet \u00e9v\u00e9nement.<\/li>\n<li>Cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb en haut de la bo\u00eete de dialogue \u00c9v\u00e9nements pour cr\u00e9er une autre interaction pour l&rsquo;image. Suivez les \u00e9tapes suivantes pour cr\u00e9er l&rsquo;interaction :\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742290981\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Choisissez un d\u00e9clencheur <strong>On Drag Stop.<\/strong> <\/li>\n<li><strong>b.<\/strong>  Vous verrez appara\u00eetre un nouveau champ dans lequel vous pourrez choisir la cible de d\u00e9p\u00f4t. Cliquez sur le bouton \u00ab\u00a0engrenage\u00a0\u00bb pour ouvrir un aper\u00e7u du canevas dans lequel vous pouvez s\u00e9lectionner la cible de d\u00e9p\u00f4t. S\u00e9lectionnez le panneau dynamique sur la droite.  <\/li>\n<li><strong>c.<\/strong> Vous pouvez maintenant s\u00e9lectionner une action <strong>Ins\u00e9rer un \u00e9l\u00e9ment dans un conteneur<\/strong>. Vous verrez appara\u00eetre deux aper\u00e7us de Canvas. Dans l&rsquo;aper\u00e7u du haut, s\u00e9lectionnez l&rsquo;image. Dans l&rsquo;aper\u00e7u du bas, s\u00e9lectionnez le panneau 1 dans le panneau dynamique de droite.   Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<\/li>\n<\/ul>\n<\/li>\n<li>Cliquez \u00e0 nouveau sur le bouton \u00ab\u00a0+\u00a0\u00bb pour cr\u00e9er une autre interaction. Cr\u00e9ez un autre \u00e9v\u00e9nement <strong>On Drag Stop<\/strong> + <strong>Insert element into container<\/strong>. Cette fois, s\u00e9lectionnez le panneau dynamique de gauche comme cible de l&rsquo;arr\u00eat du glissement ainsi que le conteneur dans lequel ins\u00e9rer l&rsquo;image.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43834\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Drag-stop-left-panel.png\" alt=\"Cr\u00e9ez un autre \u00e9v\u00e9nement d'arr\u00eat par glissement, en ins\u00e9rant l'image dans le panneau de gauche.\" width=\"1280\" height=\"755\"><br \/>\nVous devriez maintenant avoir trois interactions diff\u00e9rentes dans votre palette d&rsquo;\u00e9v\u00e9nements.<\/li>\n<li>Vous pouvez maintenant copier ces \u00e9v\u00e9nements sur les autres images du panneau dynamique. Cliquez sur le bouton \u00ab\u00a0copier\u00a0\u00bb dans la palette \u00c9v\u00e9nements. S\u00e9lectionnez une autre image dans le panneau dynamique et cliquez sur le bouton \u00ab\u00a0coller\u00a0\u00bb dans la palette \u00c9v\u00e9nements. R\u00e9p\u00e9tez cette op\u00e9ration jusqu&rsquo;\u00e0 ce que vous ayez coll\u00e9 les \u00e9v\u00e9nements sur toutes les images.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43836\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/08\/Drag-events-1.png\" alt=\"Il doit y avoir trois \u00e9v\u00e9nements dans la palette d'\u00e9v\u00e9nements pour chaque image\" width=\"1116\" height=\"814\"><\/li>\n<\/ol>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype. Faites glisser les images entre les panneaux et vous les verrez plac\u00e9es dans le panneau tandis que les images restantes dans chaque panneau se d\u00e9placeront automatiquement pour \u00eatre centr\u00e9es. <\/p>\n<h2><a id=\"mask-images\"><\/a>Images masqu\u00e9es<\/h2>\n<p>Vous pouvez utiliser des panneaux dynamiques pour masquer des images dans vos prototypes. Voici comment proc\u00e9der : <\/p>\n<ol>\n<li>S\u00e9lectionnez une image sur le canevas.<\/li>\n<li>Cliquez avec le bouton droit de la souris, allez dans Groupe, puis s\u00e9lectionnez \u00ab\u00a0Groupe dans le panneau dynamique\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43824\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Group-image-in-panel.png\" alt=\"Cliquez avec le bouton droit de la souris sur une image et regroupez-la dans un panneau dynamique pour la masquer.\" width=\"1007\" height=\"586\"><\/li>\n<li>Vous verrez que l&rsquo;image se trouve maintenant dans un panneau dynamique et que vous pouvez utiliser les indicateurs pour redimensionner le panneau autour de l&rsquo;image. Vous pouvez \u00e9galement d\u00e9placer l&rsquo;image \u00e0 l&rsquo;int\u00e9rieur du panneau. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43826\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Mask-image-indicators.png\" alt=\"Regroupez l'image dans un panneau dynamique et utilisez les indicateurs de chaque c\u00f4t\u00e9 pour redimensionner le panneau autour de l'image.\" width=\"1024\" height=\"596\"><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Les panneaux dynamiques sont des widgets qui peuvent contenir d&rsquo;autres \u00e9l\u00e9ments dans vos prototypes. Ce sont des sortes de mini-canvas dans lesquelles vous pouvez placer des&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8420],"tags":[],"class_list":["post-124621","post","type-post","status-publish","format-standard","hentry","category-formation","category-interactions-web-et-mobiles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124621"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124621"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124621\/revisions"}],"predecessor-version":[{"id":126130,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124621\/revisions\/126130"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}