{"id":129000,"date":"2019-01-02T18:02:01","date_gmt":"2019-01-02T17:02:01","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-fluid-table\/"},"modified":"2025-02-13T18:44:57","modified_gmt":"2025-02-13T17:44:57","slug":"create-a-fluid-table","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/erstellen-fluidtabelle","title":{"rendered":"Erstellen Sie eine Fluidtabelle"},"content":{"rendered":"<p>Eine flie\u00dfende Tabelle ist eine einfache M\u00f6glichkeit, viele Elemente auf dem Bildschirm hinzuzuf\u00fcgen und sie gleichm\u00e4\u00dfig und reaktionsschnell zu verteilen.<br \/>\n<video style=\"max-width:820px; width:100%; padding:20px 0px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/fluid-table-example.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/fluid-table-example.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/09\/fluid-table-example.png\" alt=\"Widget f\u00fcr fl\u00fcssige Tabellen\">Widget f\u00fcr fl\u00fcssige Tabellen<\/source><\/video><br \/>\nHier sehen Sie, wie Sie eines erstellen:<\/p>\n<ol>\n<li>Ziehen Sie ein Tabellen-Widget auf den Canvas.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15166\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget.png\" alt=\"Tablet-Widget\" width=\"755\" height=\"401\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget.png 1640w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget-300x159.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget-768x407.png 768w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/TableWidget-1024x543.png 1024w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/li>\n<li>\u00c4ndern Sie die Spalten und Zeilen so, dass sie die verschiedenen Bereiche widerspiegeln, in denen Sie Elemente platzieren m\u00f6chten. In unserem Beispiel fungiert unsere Tabelle als Fu\u00dfzeile, daher haben wir zwei Spalten und eine Zeile. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15167\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/ColumnsandRows.png\" alt=\"Spalten und Zeilen\" width=\"755\" height=\"410\"><\/li>\n<li>Da es sich bei unserer Tabelle um eine Fu\u00dfzeile handelt, heften Sie sie an den unteren Rand des Bildschirms und setzen ihre Breite auf 100%.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15168\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/PinandWidth.png\" alt=\"Pin-Tabelle und prozentuale Breite\" width=\"755\" height=\"403\"><\/li>\n<li>\u00c4ndern Sie in Zelle 1 das Layout auf vertikal und ziehen Sie dann zwei Text-Widgets in die Zelle. Das eine wird automatisch \u00fcber dem anderen platziert. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15169\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/DragTextWidgets.png\" alt=\"Text-Widgets ziehen\" width=\"755\" height=\"408\"><\/li>\n<li>\u00c4ndern Sie in Zelle 2 das Layout auf horizontal und die Ausrichtung auf zentriert. \u00c4ndern Sie den horizontalen Abstand auf 30. Ziehen Sie ein paar Symbole und ein Schaltfl\u00e4chen-Widget in diese Zelle. Sie werden automatisch mit einem Abstand von 30 px nebeneinander platziert.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15171\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/CellLayout.png\" alt=\"Zellen-Layout\" width=\"755\" height=\"401\"><\/li>\n<li>W\u00e4hlen Sie das Widget Schaltfl\u00e4che und \u00e4ndern Sie seine Breite auf 37%. Sie k\u00f6nnen auch einen Rand um die Schaltfl\u00e4che hinzuf\u00fcgen, wenn Sie einen gr\u00f6\u00dferen Abstand zu den Symbolen haben m\u00f6chten. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15172\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/CellWidth.png\" alt=\"Breite der Zelle\" width=\"755\" height=\"403\"><\/li>\n<li>W\u00e4hrend die Schaltfl\u00e4che noch ausgew\u00e4hlt ist, erstellen Sie ein Ereignis &#8222;Bei Gr\u00f6\u00dfen\u00e4nderung des Fensters&#8220; + &#8222;Ausblenden&#8220; und w\u00e4hlen die Schaltfl\u00e4che als auszublendendes Ziel.\n<div class=\"embed-container\" style=\"padding-bottom:56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745761873\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>Erstellen Sie eine Bedingung f\u00fcr diese Aktion, so dass die Schaltfl\u00e4che nur ausgeblendet wird, wenn der Bildschirm zu klein ist. Klicken Sie auf den Text &#8222;Bedingung hinzuf\u00fcgen&#8220;. Das Formular f\u00fcr bedingte Ausdr\u00fccke wird angezeigt, und Sie k\u00f6nnen die Bedingung wie folgt erstellen:\n<div class=\"embed-container\" style=\"padding-bottom:56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745761896\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><strong>1.<\/strong> Klicken Sie auf die Registerkarte &#8222;Konstanten&#8220;. Ziehen Sie das Symbol &#8222;Fensterbreite&#8220; in den offenen Bereich des Ausdrucks<br \/>\n<strong>2.<\/strong> Klicken Sie auf die Registerkarte &#8222;Funktionen&#8220; und sehen Sie sich den Abschnitt &#8222;Komparatoren&#8220; an. Ziehen Sie ein Symbol &#8222;Kleiner als&#8220; (&#8222;&lt;&#8222;) neben das Symbol &#8222;Fensterbreite&#8220;.<br \/>\n<strong>3.<\/strong> Schlie\u00dflich doppelklicken Sie in das freie Feld, das neben dem Symbol &#8218;Weniger als&#8216; (&#8218;&lt;&#8218;) erscheint, und geben Sie 900<br \/>\n<strong>4.<\/strong> Klicken Sie auf OK, um die Erstellung der Bedingung zu beenden.<\/li>\n<li>Klicken Sie auf den Text &#8222;Sonst&#8220;, wodurch sich das Dialogfeld Ereignisse \u00f6ffnet. Erstellen Sie ein Ereignis &#8222;Bei Gr\u00f6\u00dfen\u00e4nderung des Fensters&#8220; + &#8222;Anzeigen&#8220; und w\u00e4hlen Sie die Schaltfl\u00e4che als Ziel, das angezeigt werden soll. Klicken Sie auf OK, um die Erstellung des Ereignisses abzuschlie\u00dfen. Sie brauchen f\u00fcr dieses Ereignis keine Bedingung zu erstellen.\n<div class=\"embed-container\" style=\"padding-bottom:56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745761932\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p>Das war&#8217;s! Klicken Sie auf &#8222;Simulieren&#8220; und \u00e4ndern Sie die Fensterbreite, um zu sehen, wie Ihre Fl\u00fcssigkeitstabelle funktioniert. <\/p>\n<div><strong>Hinweis:<\/strong> Die Simulationseinstellungen m\u00fcssen so eingestellt sein, dass sie sich auf die Breite des Browsers ausdehnen. Sie k\u00f6nnen dies in den Simulationseinstellungen oder im Simulationsfenster festlegen. <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15298\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/SimulationSetting.png\" alt=\"Einstellung der Simulation\" width=\"755\" height=\"491\"><br \/>\nSie k\u00f6nnen <a href=\"https:\/\/s3-eu-west-1.amazonaws.com\/justinmind\/examples\/FluidTable.vp\">unser Beispiel hier herunterladen.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eine flie\u00dfende Tabelle ist eine einfache M\u00f6glichkeit, viele Elemente auf dem Bildschirm hinzuzuf\u00fcgen und sie gleichm\u00e4\u00dfig und reaktionsschnell zu verteilen. Widget f\u00fcr fl\u00fcssige Tabellen Hier sehen&#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,8555],"tags":[],"class_list":["post-129000","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-reaktionsfaehiges-prototyping"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129000"}],"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=129000"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129000\/revisions"}],"predecessor-version":[{"id":129222,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129000\/revisions\/129222"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}