{"id":129054,"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-13T17:55:25","modified_gmt":"2025-02-13T16:55:25","slug":"dynamic-panels","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/dynamische-paneele","title":{"rendered":"Dynamische Paneele"},"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>Dynamische Panels sind Widgets, die andere Elemente in Ihren Prototypen aufnehmen k\u00f6nnen. Sie sind wie Mini-Leinw\u00e4nde, in die Sie Elemente einf\u00fcgen und zwischen denen Sie wechseln k\u00f6nnen, wenn Sie Ihren Prototyp simulieren. <\/p>\n<p>Sie k\u00f6nnen sie verwenden, um Elemente zu maskieren und verschiedene Inhalte im selben Bereich eines Bildschirms anzuzeigen, z. B. Navigationsregisterkarten und Pop-ups.<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\/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=\"Dynamische Panels\"><br \/>\nDynamische Panels<\/video><br \/>\nJedes dynamische Panel enth\u00e4lt standardm\u00e4\u00dfig ein Panel, aber Sie k\u00f6nnen weitere hinzuf\u00fcgen, sobald Sie dem Canvas eines hinzugef\u00fcgt haben. Sie k\u00f6nnen immer nur ein Panel auf einmal anzeigen. <\/p>\n<h2><a id=\"create-dynamic-panel\"><\/a>Ein dynamisches Panel erstellen<\/h2>\n<p>Dynamische Panels finden Sie im Dropdown-Men\u00fc der Symbolleiste unter &#8218;Dynamischer Inhalt&#8216; oder durch Dr\u00fccken der Taste <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=\"Ein dynamisches Panel auf der Leinwand. Sie finden es in der Symbolleiste unter Dynamischer Inhalt.\" width=\"1274\" height=\"752\"><br \/>\nNachdem Sie einen Bereich auf dem Canvas platziert haben, sehen Sie ein schwebendes Men\u00fc daneben. Sie k\u00f6nnen weitere Felder hinzuf\u00fcgen, indem Sie auf die Schaltfl\u00e4che &#8218;+&#8216; im Men\u00fc klicken. Sie k\u00f6nnen dieses Men\u00fc oder die Ebenen-Palette auch verwenden, um Ihre anderen Felder anzuzeigen und zu bearbeiten.<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=\"Schwebende Men\u00fcleiste\"><br \/>\nSchwebende Men\u00fcleiste<\/video><\/p>\n<h2><a id=\"add-move-delete-elements\"><\/a>Elemente hinzuf\u00fcgen, verschieben und l\u00f6schen<\/h2>\n<h3>Elemente zu einem Panel hinzuf\u00fcgen<\/h3>\n<h4>Verwenden Sie die Tasten Command\/Control<\/h4>\n<p>Sie k\u00f6nnen Elemente in einem dynamischen Panel platzieren, indem Sie die <kbd>Befehlstaste<\/kbd> (Mac) oder die <kbd>Steuerungstaste<\/kbd> (Windows) gedr\u00fcckt halten und ein Element oder eine Gruppe von Elementen hineinziehen. Sie sehen, dass sich das Panel blau f\u00e4rbt, wenn Sie ihm ein Element hinzuf\u00fcgen.   <\/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>Klicken Sie mit der rechten Maustaste auf<\/h4>\n<p>W\u00e4hlen Sie ein Element oder eine Gruppe von Elementen aus, klicken Sie mit der rechten Maustaste, gehen Sie auf Gruppieren und w\u00e4hlen Sie dann &#8218;In dynamischem Panel gruppieren&#8216;. Alle Elemente, die Sie ausgew\u00e4hlt haben, befinden sich nun in einem dynamischen Panel.<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=\"W\u00e4hlen Sie Elemente auf dem Canvas und klicken Sie mit der rechten Maustaste, um sie in einem dynamischen Panel zu gruppieren.\" width=\"1066\" height=\"621\"><\/p>\n<h3>Verschieben und L\u00f6schen von Elementen in einem Panel<\/h3>\n<p>Aktivieren Sie das Direktauswahl-Werkzeug, indem Sie die Taste <kbd>A<\/kbd> dr\u00fccken oder es in der Symbolleiste ausw\u00e4hlen. Mit dem Direktauswahl-Werkzeug k\u00f6nnen Sie schnell ein Element in einem dynamischen Panel oder in einer Gruppe ausw\u00e4hlen. Sie k\u00f6nnen dieses Element dann innerhalb des Panels verschieben oder au\u00dferhalb des Panelbereichs platzieren, um es aus dem Panel zu entfernen.<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=\"Verwenden Sie die Taste A, um das Direktauswahlwerkzeug zu aktivieren.\" width=\"1106\" height=\"644\"><br \/>\nSchalten Sie zur\u00fcck zur normalen Auswahl, indem Sie die Taste <kbd>V<\/kbd> dr\u00fccken.<\/p>\n<h2><a id=\"duplicate-remove-panels\"><\/a>Panels duplizieren und entfernen<\/h2>\n<p>Sie k\u00f6nnen ein Panel und die darin enthaltenen Elemente duplizieren, indem Sie mit der rechten Maustaste auf ein Panel klicken und &#8218;Panel duplizieren&#8216; w\u00e4hlen.<\/p>\n<p>Entfernen Sie ein Panel, indem Sie mit der rechten Maustaste darauf klicken und &#8222;Panel entfernen&#8220; w\u00e4hlen. Beachten Sie, dass alle Elemente innerhalb dieses Bereichs ebenfalls entfernt werden. <\/p>\n<h2><a id=\"default-panel\"><\/a>Das Standard-Panel<\/h2>\n<p>Jedes dynamische Panel hat ein Standard-Panel, Panel 1, das als erstes angezeigt wird, wenn Sie Ihren Prototyp simulieren. Um ein anderes Panel zum Standard-Panel zu machen:<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=\"Das Standard-Panel\"><br \/>\nDas Standard-Panel<\/video><\/p>\n<ol>\n<li>W\u00e4hlen Sie das dynamische Panel<\/li>\n<li>Gehen Sie zur Palette Eigenschaften<\/li>\n<li>W\u00e4hlen Sie einen anderen Bereich aus dem Dropdown-Men\u00fc &#8218;Standardbereich&#8216;.<\/li>\n<\/ol>\n<h2><a id=\"events-with-panels\"><\/a>Veranstaltungen mit Panels<\/h2>\n<h3>Aktives Panel einstellen<\/h3>\n<p>W\u00e4hrend Sie w\u00e4hrend der Bearbeitung \u00fcber das schwebende Men\u00fc zwischen den Panels wechseln k\u00f6nnen, m\u00fcssen Sie w\u00e4hrend der Simulation mit der Aktion <strong>Aktives Panel festlegen<\/strong> zwischen den Panels wechseln.<\/p>\n<p>W\u00e4hlen Sie einen Ausl\u00f6ser, um das Ereignis zu starten (z.B. einen Klick auf eine Schaltfl\u00e4che), und suchen Sie dann die Aktion <strong>Aktives Panel festlegen<\/strong> in der Dropdown-Liste Aktionen. Sobald Sie die Aktion ausgew\u00e4hlt haben, wird die Leinwandvorschau angezeigt, in der Sie den Bereich ausw\u00e4hlen k\u00f6nnen, den Sie als aktiv festlegen m\u00f6chten. M\u00f6glicherweise ist es einfacher, das Panel aus der Dialog-Ebenenpalette auszuw\u00e4hlen.<br \/>\n<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=\"W\u00e4hlen Sie die Aktion Aktives Panel festlegen und w\u00e4hlen Sie ein Panel, das Sie als aktiv festlegen m\u00f6chten.\" width=\"1156\" height=\"679\"><\/p>\n<h3>Auf dem Bildschirm Aktiv<\/h3>\n<p>Mit dem Ausl\u00f6ser <strong>On Panel Active<\/strong> k\u00f6nnen Sie Ereignisse erstellen, die immer dann ausgel\u00f6st werden, wenn Sie zu einem bestimmten Panel wechseln.<\/p>\n<p><strong>On Panel Active<\/strong> ist n\u00fctzlich f\u00fcr die Erstellung von sich wiederholenden Ereignissen, wie Diashows und Countdown-Timer. So k\u00f6nnen Sie z.B. die Aktionen <strong>Pause<\/strong> mit den Ereignissen <strong>On Panel Active<\/strong> + <strong>Set Active Panel<\/strong> kombinieren, um eine Diashow zu erstellen, die automatisch zwischen den Panels wechselt. <\/p>\n<h2><a id=\"common-uses-for-panels\"><\/a>H\u00e4ufige Verwendungszwecke f\u00fcr dynamische Panels<\/h2>\n<p>Sie k\u00f6nnen dynamische Bedienfelder auf viele verschiedene Arten verwenden &#8211; von der Erstellung von Best\u00e4tigungsdialogen und modalen Fenstern, Bildlaufbereichen, schwebenden Kopfzeilen, Diashows und vielem mehr.  [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=\"H\u00e4ufige Verwendungszwecke f\u00fcr dynamische Panels\"><br \/>\nH\u00e4ufige Verwendungszwecke f\u00fcr dynamische Panels<\/video><br \/>\nFahren Sie mit dem n\u00e4chsten Artikel fort, um zu erfahren, wie Sie diese h\u00e4ufigen Anwendungsf\u00e4lle erstellen k\u00f6nnen.<\/p>\n<h2><a id=\"nav-tab-menu\"><\/a>Men\u00fcs der Navigationsregisterkarten<\/h2>\n<p>In diesem Beispiel lernen Sie, wie Sie Navigations- und Men\u00fcregisterkarten mit dynamischen Bereichen erstellen k\u00f6nnen. Mit jeder Registerkarte k\u00f6nnen Sie zu verschiedenen dynamischen Bereichen wechseln, die unterschiedliche Informationen enthalten.<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=\"Men\u00fcs der Navigationsregisterkarten\">Men\u00fcs der Navigationsregisterkarten<\/video><\/p>\n<h3>Das Beispiel designen<\/h3>\n<ol>\n<li>Ziehen Sie vier Rechteck-Elemente auf den Canvas und positionieren Sie sie horizontal auf dem Canvas, damit sie dem Beispiel entsprechen. Dies werden die Navigationsregisterkarten sein, zwischen denen Sie wechseln werden. Gestalten Sie sie nach Belieben und nennen Sie sie &#8222;Registerkarte Eins&#8220;, &#8222;Registerkarte Zwei&#8220;, &#8222;Registerkarte Drei&#8220; und &#8222;Registerkarte Vier&#8220; Das Rechteck auf der linken Seite (&#8222;Registerkarte Eins&#8220;) wird die standardm\u00e4\u00dfig ausgew\u00e4hlte Registerkarte sein. \u00c4ndern Sie den Hintergrund und die Schriftfarbe, damit er ausgew\u00e4hlt aussieht.<\/li>\n<li>Ziehen Sie ein weiteres Rechteck unter die Registerkarten und passen Sie seine Gr\u00f6\u00dfe an, damit es gr\u00f6\u00dfer wird. Dieses Rechteck wird als Hintergrundebene f\u00fcr das Fenster dienen, das die einzelnen Registerkarten anzeigt. <\/li>\n<li>Platzieren Sie Elemente auf dem Rechteck, um den Inhalt Ihres ersten Registerkartenfensters zu erstellen.<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=\"Gestalten Sie den Inhalt des Registerkartenfensters\" width=\"1229\" height=\"714\"><\/li>\n<li>W\u00e4hlen Sie das Rechteck und die Elemente innerhalb des Registerkartenfensters aus, klicken Sie mit der rechten Maustaste, gehen Sie zu Gruppe und w\u00e4hlen Sie &#8218;In dynamischem Panel gruppieren&#8216;. Alle Elemente mit Ausnahme der Registerkarten auf dem Canvas sollten sich nun in einem dynamischen Panel befinden. <\/li>\n<li>Klicken Sie mit der rechten Maustaste auf das Panel und w\u00e4hlen Sie &#8218;Panel duplizieren&#8216;. Duplizieren Sie diesen Bereich noch zwei weitere Male, bis Sie insgesamt vier Bereiche haben. <\/li>\n<li>\u00c4ndern Sie den Fensterinhalt in jedem Panel wie gew\u00fcnscht.<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=\"Duplizieren Sie das Panel dreimal und passen Sie den Inhalt darin an\" width=\"1434\" height=\"833\"><\/li>\n<\/ol>\n<h3>Erstellen Sie die Ereignisse<\/h3>\n<p>Sie m\u00fcssen einige Ereignisse erstellen, damit Sie w\u00e4hrend der Simulation zwischen den Tab-Fenstern wechseln k\u00f6nnen.<\/p>\n<ol>\n<li>W\u00e4hlen Sie das Rechteck &#8222;Registerkarte Eins&#8220;, gehen Sie zur Palette Ereignisse und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.<\/li>\n<li>Erstellen Sie ein Ereignis <strong>Bei Klick<\/strong> + <strong>Aktives Panel festlegen<\/strong> und w\u00e4hlen Sie Panel 1 als aktiv aus. Wenn Sie nun auf &#8222;Registerkarte Eins&#8220; klicken, wechseln Sie zu Panel 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=\"Erstellen Sie ein Ereignis bei Klick und Aktivieren des Panels, wobei Sie Panel 1 als aktiv festlegen.\" width=\"1306\" height=\"760\"><\/li>\n<li>Gehen Sie zur\u00fcck zur Ereignispalette und klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216; neben der Aktion, die Sie gerade erstellt haben. Erstellen Sie ein Ereignis Bei <strong>Klick<\/strong> + <strong>Stil \u00e4ndern<\/strong> und w\u00e4hlen Sie &#8222;Registerkarte Eins&#8220; als Ziel der Aktion. F\u00fcgen Sie f\u00fcr die zu \u00e4ndernden Stile die Hintergrund- und Schriftfarben hinzu. Belassen Sie die Farben auf den Standardwerten.\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>Mit dieser Aktion wird &#8222;Registerkarte eins&#8220; so ge\u00e4ndert, dass sie ausgew\u00e4hlt aussieht, wenn Sie auf sie klicken.<\/li>\n<li>Als N\u00e4chstes m\u00fcssen Sie ein Ereignis erstellen, um den Stil der anderen Registerkarten so zu \u00e4ndern, dass sie nicht mehr ausgew\u00e4hlt sind, wenn Sie auf &#8222;Registerkarte Eins&#8220; klicken.Klicken Sie auf die Schaltfl\u00e4che &#8218;+&#8216; neben der soeben erstellten Aktion und erstellen Sie ein weiteres Ereignis <strong>Bei Klick<\/strong> + <strong>Stil \u00e4ndern<\/strong>. W\u00e4hlen Sie die drei anderen Registerkarten als Ziele der Aktion aus &#8211; Sie k\u00f6nnen die <kbd>Umschalttaste<\/kbd> verwenden, um mehrere auszuw\u00e4hlen. F\u00fcgen Sie die zu \u00e4ndernden Hintergrund- und Schriftfarben hinzu und belassen Sie deren Farbgebung auf der Standardeinstellung.  <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=\"W\u00e4hlen Sie die Registerkarten zwei, drei und vier, um den Stil so zu \u00e4ndern, dass er nicht ausgew\u00e4hlt ist.\" width=\"1136\" height=\"660\"><\/li>\n<li>Klicken Sie auf die Schaltfl\u00e4che &#8218;Kopieren&#8216; oben in der Ereignispalette, um alle Aktionen zu kopieren, die Sie auf &#8222;Registerkarte Eins&#8220; erstellt haben. Gehen Sie zu &#8222;Registerkarte Zwei&#8220; und klicken Sie auf die Schaltfl\u00e4che &#8222;Einf\u00fcgen&#8220;, um sie auf &#8222;Registerkarte Zwei&#8220; einzuf\u00fcgen. <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=\"Kopieren und Einf\u00fcgen\">Kopieren und Einf\u00fcgen<\/video><\/li>\n<li>Doppelklicken Sie auf die Aktion <strong>Aktives Panel festlegen<\/strong> und \u00e4ndern Sie das Panel, das als aktiv festgelegt ist, von Panel 1 auf Panel 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=\"Registerkarte \u00e4ndern\">Registerkarte Panel \u00e4ndern<\/video><\/li>\n<li>Doppelklicken Sie auf die Aktion <strong>Stil \u00e4ndern<\/strong>, die den Stil der Registerkarten zwei, drei und vier \u00e4ndert. Heben Sie die Markierung von &#8222;Registerkarte zwei&#8220; auf und w\u00e4hlen Sie &#8222;Registerkarte eins&#8220;, um die Aktion zu aktivieren. Sie sollten nun die Registerkarten eins, drei und vier zum \u00c4ndern des Stils ausgew\u00e4hlt haben.  <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=\"W\u00e4hlen Sie die Felder eins, drei und vier, um den Stil zu \u00e4ndern. Heben Sie die Markierung von Registerkarte zwei auf.\" width=\"1219\" height=\"709\"><\/li>\n<li>Wiederholen Sie die Schritte 5 bis 8, bis jede der Registerkarten die richtigen Aktionen hat &#8211; d.h. wenn Sie auf &#8222;Registerkarte drei&#8220; klicken, wird die Registerkarte drei als ausgew\u00e4hlt und die Registerkarten eins, zwei und vier als nicht ausgew\u00e4hlt angezeigt.<\/li>\n<\/ol>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihren Prototyp zu simulieren. Klicken Sie auf eine der Registerkarten, um zwischen den Panels zu wechseln und zu sehen, wie sich der Stil dieser Registerkarte \u00e4ndert, um ausgew\u00e4hlt auszusehen. <\/p>\n<h2><a id=\"confirmation-dialog\"><\/a>Best\u00e4tigungsdialog<\/h2>\n<p>Sie k\u00f6nnen dynamische Bedienfelder verwenden, um Warnmeldungen und modale Fenster zu erstellen. In diesem Beispiel erfahren Sie, wie Sie einen Best\u00e4tigungsdialog mithilfe eines dynamischen Bedienfelds und der Aktion Aktives Bedienfeld festlegen erstellen.<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=\"Best\u00e4tigungsdialog\">Best\u00e4tigungsdialog<\/video><\/p>\n<h3>Das Beispiel designen<\/h3>\n<ol>\n<li>Entwerfen Sie einen Web- oder Handy-Prototyp. Erstellen Sie passend zum Beispiel einen Android-Prototyp und platzieren Sie einige Rechteck-, Text- und Bildelemente auf dem Bildschirm. <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=\"Text, Rechtecke und Bilder zur Leinwand hinzuf\u00fcgen\" width=\"1023\" height=\"593\"><\/li>\n<li>Platzieren Sie ein dynamisches Panel auf dem Canvas, das sich \u00fcber den gesamten Bildschirm erstreckt. Sie finden es im Abschnitt Dynamischer Inhalt der Symbolleiste oder indem Sie die Taste <kbd>D<\/kbd> dr\u00fccken. <\/li>\n<li>Markieren Sie das dynamische Panel als w\u00e4hrend der Simulation ausgeblendet, indem Sie auf die Schaltfl\u00e4che &#8218;Auge&#8216; in der Eigenschaftenpalette tippen.<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=\"Klicken Sie auf die Augen-Schaltfl\u00e4che in der Eigenschaften-Palette, um das Panel auszublenden\" width=\"950\" height=\"458\"><\/li>\n<li>Geben Sie dem dynamischen Panel einen schwarzen Hintergrund mit 40% Deckkraft. Dies wird der Hintergrund des modalen Fensters sein. <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=\"\u00c4ndern Sie das dynamische Panel in einen dunklen Hintergrund mit 40 Prozent Deckkraft\" width=\"1024\" height=\"594\"><\/li>\n<li>Platzieren Sie die Elemente Rechteck und Text innerhalb des dynamischen Bedienfelds, um das Dialogfeld zu erstellen. Sie k\u00f6nnen sie im Panel platzieren, indem Sie die <kbd>Befehlstaste<\/kbd> (Mac) oder die <kbd>Strg-Taste<\/kbd> (Windows) gedr\u00fcckt halten und die Elemente hineinziehen. Um dem Beispiel zu entsprechen, erstellen Sie die Texte &#8222;Nein&#8220; und &#8222;Ja&#8220;.  <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=\"Ziehen Sie Rechteck- und Textelemente in das Bedienfeld, um den Dialog zu erstellen\" width=\"878\" height=\"466\"><\/li>\n<li>Klicken Sie mit der rechten Maustaste auf das dynamische Panel und w\u00e4hlen Sie &#8218;Panel duplizieren&#8216;. Sie sollten nun ein dynamisches Panel mit zwei Unter-Panels haben &#8211; Panel 1 und Panel 2. <\/li>\n<li>Passen Sie das Best\u00e4tigungsdialogfeld in Panel 2 an. Um dem Beispiel zu entsprechen, f\u00fcgen Sie nur ein Textelement ein &#8211; &#8222;OK&#8220;<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43772\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Second-panel-dialog.png\" alt=\"Gestalten Sie das zweite Panel-Dialogfeld\" width=\"1136\" height=\"650\">. <\/li>\n<\/ol>\n<h3>Erstellen Sie die Ereignisse<\/h3>\n<ol>\n<li>W\u00e4hlen Sie ein Element, das den Best\u00e4tigungsdialog anzeigen soll. Gehen Sie zur Palette Ereignisse und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;. Erstellen Sie ein Ereignis <strong>On Tap<\/strong> + <strong>Show Hidden Element<\/strong> und w\u00e4hlen Sie das dynamische Panel in der Canvas-Vorschau aus, das angezeigt werden soll. F\u00fcgen Sie einen \u00dcberblendungseffekt hinzu und klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses abzuschlie\u00dfen.   <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=\"W\u00e4hlen Sie die Option Ausgeblendetes Element anzeigen und w\u00e4hlen Sie das dynamische Panel, das angezeigt werden soll.\" width=\"1023\" height=\"595\"><\/li>\n<\/ol>\n<div><strong>Hinweis:<\/strong> In Web-Prototypen wird <strong>On Tap<\/strong> zu <strong>On Click<\/strong>.<\/div>\n<ol>\n<li>Jetzt brauchen Sie ein Ereignis, um im Best\u00e4tigungsdialog zwischen den beiden Feldern zu wechseln. Markieren Sie den Text &#8222;Ja&#8220; im Dialog, erstellen Sie ein Ereignis <strong>&#8222;On Tap<\/strong> + <strong>Set Active Panel&#8220;<\/strong> und w\u00e4hlen Sie Panel 2 aus, das als aktiv festgelegt werden soll. <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=\"Panel 2 als aktiv festlegen\" width=\"1023\" height=\"596\"><\/li>\n<li>Da Sie im Best\u00e4tigungsdialog auch &#8222;Nein&#8220; ausw\u00e4hlen k\u00f6nnen, m\u00fcssen Sie ein Ereignis erstellen, um das dynamische Panel auszublenden. Markieren Sie den Text &#8222;Nein&#8220; und erstellen Sie ein Ereignis <strong>On Tap<\/strong> + <strong>Hide<\/strong>, wobei Sie das dynamische Panel ausw\u00e4hlen, das mit einem Fade-Effekt ausgeblendet werden soll. <\/li>\n<li>Wechseln Sie zu Panel 2. Markieren Sie den Text &#8222;OK&#8220; und erstellen Sie ein Ereignis <strong>On Tap<\/strong> + <strong>Hide<\/strong>, wobei Sie das dynamische Panel ausw\u00e4hlen, das mit einem Fade-Effekt ausgeblendet werden soll. <\/li>\n<\/ol>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihren Prototyp zu simulieren. Klicken Sie auf das &#8218;X&#8216;-Symbol und es erscheint ein Best\u00e4tigungsdialog. Klicken Sie auf den Text &#8222;Nein&#8220;, um das Dialogfeld auszublenden, oder auf den Text &#8222;Ja&#8220;, um zum n\u00e4chsten Feld zu wechseln. Klicken Sie dann auf den Text &#8222;OK&#8220;, um das Dialogfeld auszublenden.   <\/p>\n<h2><a id=\"drag-and-drop\"><\/a>Objekte ziehen und ablegen<\/h2>\n<p>Dynamische Panels funktionieren nicht nur als Mini-Canvases, sondern haben auch besondere Eigenschaften als Container. Das bedeutet, dass Sie w\u00e4hrend der Simulation Elemente in sie einf\u00fcgen k\u00f6nnen. Sie k\u00f6nnen diese Funktion nutzen, um Elemente zwischen zwei dynamischen Panels zu ziehen und abzulegen.<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=\"Objekte ziehen und ablegen\">Objekte ziehen und ablegen<\/video><\/p>\n<h3>Das Beispiel designen<\/h3>\n<ol>\n<li>F\u00fcgen Sie dem Canvas zwei Rechtecke hinzu und \u00e4ndern Sie deren Gr\u00f6\u00dfe, bis sie sowohl die H\u00f6he des Canvas als auch etwa die H\u00e4lfte seiner Breite haben. Diese Rechtecke werden als Hintergrund dienen. <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=\"Platzieren Sie zwei Rechtecke auf der Leinwand, die den Hintergrund bilden sollen  \" width=\"1248\" height=\"726\"><\/li>\n<li>Platzieren Sie ein dynamisches Panel auf dem Canvas. \u00d6ffnen Sie die Palette Eigenschaften und w\u00e4hlen Sie in der Dropdown-Liste &#8222;Layout&#8220; die Option &#8222;Vertikal&#8220;. Dadurch erh\u00e4lt das Panel ein vertikales Layout, d.h. die Elemente, die Sie darin platzieren, werden \u00fcber- und untereinander gestapelt.  <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=\"\u00c4ndern Sie das Panel in der Eigenschaftenpalette in ein vertikales Layout\" width=\"1537\" height=\"902\"><\/li>\n<li>\u00c4ndern Sie in der Palette Eigenschaften die Ausrichtung des dynamischen Bereichs auf zentriert und f\u00fcgen Sie einen vertikalen Abstand hinzu.<\/li>\n<li>Duplizieren Sie das dynamische Panel, so dass Sie zwei verschiedene dynamische Panels auf dem Canvas haben. Platzieren Sie ein Panel auf der linken Seite des Bildschirms und eines auf der rechten Seite. \u00c4ndern Sie die Gr\u00f6\u00dfe der beiden Panels, bis sie die gesamte H\u00f6he des Canvas und die H\u00e4lfte seiner Breite einnehmen.  <\/li>\n<li>Ziehen Sie ein paar Bilder oder Symbole in das dynamische Panel auf der linken Seite. Sie werden sehen, dass sie \u00fcber- und untereinander gestapelt werden.<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-images-in-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-images-in-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-images-in-panel.png\" alt=\"Bilder in das Panel ziehen\">Ziehen Sie Bilder in das Panel<\/video> <\/li>\n<\/ol>\n<h3>Erstellen Sie die Ereignisse<\/h3>\n<ol>\n<li>Aktivieren Sie das Direktauswahl-Werkzeug <kbd>A<\/kbd>, um eines der Bilder im dynamischen Panel auf der linken Seite auszuw\u00e4hlen. Erstellen Sie ein Ereignis <strong>&#8222;Bei Ziehen<\/strong> + <strong>Bewegen<\/strong> &#8222;, in dem Sie dieses Bild als Ziel f\u00fcr die Bewegung ausw\u00e4hlen und w\u00e4hlen Sie f\u00fcr die X- (horizontal) und Y-Position (vertikal) die Option &#8222;Mit Cursor&#8220;. Nun wird sich dieses Bild mit der Maus bewegen, wenn Sie es w\u00e4hrend der Simulation ziehen.<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=\"Erstellen Sie ein Ereignis bei Ziehen + Bewegen und bewegen Sie das Bild mit dem Cursor\" width=\"1636\" height=\"949\"><br \/>\nKlicken Sie auf &#8218;OK&#8216;, um die Erstellung dieses Ereignisses zu beenden.<\/li>\n<li>Klicken Sie oben im Dialogfeld Ereignisse auf die Schaltfl\u00e4che &#8218;+&#8216;, um eine weitere Interaktion f\u00fcr das Bild zu erstellen. Folgen Sie diesen Schritten, um die Interaktion zu erstellen:\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> W\u00e4hlen Sie einen <strong>On Drag Stop-Ausl\u00f6ser<\/strong>.<\/li>\n<li><strong>b.<\/strong>  Es wird ein neues Feld angezeigt, in dem Sie das Ablegeziel ausw\u00e4hlen k\u00f6nnen. Klicken Sie auf die Schaltfl\u00e4che &#8218;Zahnrad&#8216;, um eine Canvas-Vorschau zu \u00f6ffnen, in der Sie das Ablageziel ausw\u00e4hlen k\u00f6nnen. W\u00e4hlen Sie das dynamische Panel auf der rechten Seite.  <\/li>\n<li><strong>c.<\/strong> Sie k\u00f6nnen jetzt eine Aktion <strong>Element in Container einf\u00fcgen<\/strong> ausw\u00e4hlen. Es werden zwei Canvas-Vorschauen angezeigt. In der oberen Vorschau w\u00e4hlen Sie das Bild aus und in der unteren Vorschau w\u00e4hlen Sie Panel 1 aus dem dynamischen Panel auf der rechten Seite.   Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses zu beenden.<\/li>\n<\/ul>\n<\/li>\n<li>Klicken Sie erneut auf die Schaltfl\u00e4che &#8218;+&#8216;, um eine weitere Interaktion zu erstellen. Erstellen Sie ein weiteres Ereignis <strong>Bei Ziehstopp<\/strong> + <strong>Element in Container einf\u00fcgen<\/strong>. Diesmal w\u00e4hlen Sie das dynamische Panel auf der linken Seite als Ziel f\u00fcr den Ziehstopp und den Container, in den das Bild eingef\u00fcgt werden soll.<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=\"Erstellen Sie ein weiteres Ereignis beim Stoppen des Ziehens und f\u00fcgen Sie das Bild in das Panel auf der linken Seite ein.\" width=\"1280\" height=\"755\"><br \/>\nSie sollten nun drei verschiedene Interaktionen in Ihrer Ereignispalette haben.<\/li>\n<li>Jetzt k\u00f6nnen Sie diese Ereignisse auf die anderen Bilder im dynamischen Bedienfeld kopieren. Klicken Sie auf die Schaltfl\u00e4che &#8222;Kopieren&#8220; in der Ereignispalette. W\u00e4hlen Sie ein anderes Bild im dynamischen Fenster und klicken Sie auf die Schaltfl\u00e4che &#8222;Einf\u00fcgen&#8220; in der Ereignispalette. Wiederholen Sie diesen Vorgang, bis Sie die Ereignisse in alle Bilder eingef\u00fcgt haben.   <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=\"F\u00fcr jedes Bild sollten drei Ereignisse in der Ereignispalette erscheinen\" width=\"1116\" height=\"814\"><\/li>\n<\/ol>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8222;Abspielen&#8220;, um Ihren Prototyp zu simulieren. Ziehen Sie die Bilder zwischen den Feldern hin und her. Sie werden sehen, dass sie im Feld platziert werden, w\u00e4hrend die \u00fcbrigen Bilder in jedem Feld automatisch in die Mitte verschoben werden. <\/p>\n<h2><a id=\"mask-images\"><\/a>Bilder maskieren<\/h2>\n<p>Sie k\u00f6nnen dynamische Panels verwenden, um Bilder in Ihren Prototypen zu maskieren. So geht&#8217;s: <\/p>\n<ol>\n<li>W\u00e4hlen Sie ein Bild auf dem Canvas aus.<\/li>\n<li>Klicken Sie mit der rechten Maustaste darauf, gehen Sie auf Gruppieren und w\u00e4hlen Sie dann &#8218;Gruppieren im dynamischen Panel&#8216;.<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=\"Klicken Sie mit der rechten Maustaste auf ein Bild und gruppieren Sie es in einem dynamischen Panel, um es zu maskieren\" width=\"1007\" height=\"586\"><\/li>\n<li>Sie werden sehen, dass sich das Bild jetzt in einem dynamischen Panel befindet und Sie k\u00f6nnen die Indikatoren verwenden, um die Gr\u00f6\u00dfe des Panels um das Bild herum zu \u00e4ndern. Sie k\u00f6nnen das Bild auch innerhalb des Fensters verschieben. <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=\"Gruppieren Sie das Bild zu einem dynamischen Panel und verwenden Sie die Indikatoren auf jeder Seite, um die Gr\u00f6\u00dfe des Panels um das Bild herum anzupassen.\" width=\"1024\" height=\"596\"><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Dynamische Panels sind Widgets, die andere Elemente in Ihren Prototypen aufnehmen k\u00f6nnen. Sie sind wie Mini-Leinw\u00e4nde, in die Sie Elemente einf\u00fcgen und zwischen denen Sie wechseln&#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":[8554,8556],"tags":[],"class_list":["post-129054","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-web-mobile-interaktionen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129054"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129054"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129054\/revisions"}],"predecessor-version":[{"id":129205,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129054\/revisions\/129205"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}