Material-ui: [Raster] Automatische Höhenanpassung (Responsive Layout)

Ich habe das Gefühl, dass das, was Sie erreichen möchten, auf Userland implementiert und auf eine Nische ausgerichtet werden kann. Aus diesen Gründen schließe ich das Thema. Lassen Sie uns die Codebasis einfach halten.

Ich verstehe voll und ganz, dass die Basis des Codes einfach geblieben ist, aber die Materialspezifikation besagt: "Elemente aus einem einspaltigen Format können umfließen, um den Inhaltsbereich in verschiedenen Kombinationen zu füllen."

Aber derzeit ist das Beste, was ich mit Grid tun kann, Folgendes:

Dann denke ich ernsthaft, dass ein Code einfach bleiben kann, während er Funktionalitäten hat

Dank,

PS: Wenn Sie eine KLEINE Komponente kennen, die das gleiche Ergebnis wie die Spezifikation liefert, lassen Sie es mich wissen.
(Aber ich denke immer noch, dass die Integration in Material UI für alle von Vorteil wäre)

Vielleicht suchen Sie eine Mauerwerksbibliothek: https://masonry.desandro.com/layout.html.

Ja, das ist eine gute Idee, während man auf die native Integration in Material UI wartet, _{^{wenn es eines Tages kommt :)}}

PS: Können Sie die Wiederaufnahme des Themas in Erwägung ziehen?

Dank,

Wenn Sie Hilfe bei der Integration dieser Funktion benötigen, können Sie hier, glaube ich, Unterstützung zum CSS-Code des materiellen Frameworks von Google in Anspruch nehmen

Material ui ist sicherlich das beste Set an React-Komponenten!

Ich glaube nicht, dass getmdl dies tun könnte, ich habe es nicht überprüft, aber ich bin mir ziemlich sicher, dass der von Ihnen bereitgestellte Link ein statisches Beispiel ist. Bei dynamischen Inhalten habe ich gesehen, dass es nur in der Rasterliste für Rasterliste für eckiges Material 1 funktioniert. Aber sie verwenden einen komplexen Algorithmus ...

Ja, du hast Recht, aber ich habe nie festgelegt, dass der Inhalt des Dashboards nicht statisch sein soll 😄
Anscheinend macht das eckige Material sehr gut, was Gitter nicht tun ... Aber mit zu komplexer Logik!

Soweit ich weiß, können Sie das bereits mit den responsiven Breakpoints des Grids xs , sm , md usw.
Wenn Sie etwas "100%" automatisches benötigen, ist eine Mauerwerksbibliothek für Ihren Bedarf besser geeignet, die jedoch außerhalb des Rahmens des Projekts liegt.

Hallo @oliviertassinari ,
Aber Materialspezifikationen für das Gitter? Wie ich in meinem vorherigen Kommentar erklärt habe?

Ich verstehe nicht, wie ich das mit den Breakpoints implementieren könnte, das Grid lässt keine Änderung seiner Größe zu! Das Problem ist hier!

Warum kann die zweite Musikkarte nicht an der "aperçu"-Karte kleben? Dies widerspricht der Materialspezifikation.

Allgemeiner gesagt, warum überlässt Grid dem Benutzer nicht die Wahl, seine Karten so zu platzieren, wie er es möchte?

Ich hoffe, Sie haben Verständnis für meine Bitte und öffnen das Thema erneut
Und ehrlich gesagt, ich glaube nicht, dass das außerhalb des Projekts liegt, material.angular hat es integriert.

• Sie können die höherwertige Komponente withWidth() verwenden, um die Rasterstruktur für die verschiedenen Haltepunkte zu ändern. Das Grid ist ein schlanker Wrapper über dem Flexbox-Modell. Alles, was dieses Layout-Modell ermöglicht, kann mit der Grid-Komponente erreicht werden.
• Sie können auch die Richtung von Zeile zu Spalte ändern, um das gewünschte Verhalten zu erzielen.

Hm, ich denke, ich werde in der Lage sein, damit fertig zu werden, aber wenn es möglich ist, dieses Beispiel in die Dokumentation für Anfänger aufzunehmen, die dieselbe Frage stellen?
Ich muss mir überlegen, wie ich mein Dashboard implementiere ... danke für deine Hilfe

Hey, ich hätte auch gerne diese Funktion, und ich habe nicht verstanden, wie man sie wie vorgeschlagen implementieren könnte. HalloEdit, hast du es geschafft, das zum Laufen zu bringen? kannst du ein beispiel geben? Ich denke, dieser Anwendungsfall sollte in der Dokumentation stehen.

Hey, ich habe keine Lösung gefunden (eine externe Bibliothek verwenden wie Mauerwerk könnte funktionieren) Aber keine nativ. An meiner Idee, dieses Feature nativ zu implementieren, bleibe ich weiterhin bestehen!

Am Ende haben wir 2 Spalten erstellt und die Daten gleichmäßig aufgeteilt. Das Problem ist, dass, wenn eine der Spalten mit all den größeren Karten endet, eine Seite viel länger sein kann als die andere.

Ich stimme @HelloEdit zu . Dies ist ein großes Problem, nicht in das Raster aufgenommen zu werden. Ich fühle mich irgendwie lahm, wenn ich überhaupt das Material-UI-Raster verwende, denn warum sollte ich ein Raster verwenden, das die meiste Zeit schlecht aussieht mit hässlichen Lücken und nicht den Material-UI-Spezifikationen entspricht?

Ich habe kein einziges Raster in meiner App, in dem ich möchte, dass es wie das Material-UI-Raster funktioniert, und Ihre Rasterdokumentationsseite ist zu einfach, um zu zeigen, dass Ihre Raster so funktionieren, also habe ich das nicht bemerkt war ein "Feature" Ihres Rasters, bevor Sie es in meiner App entdeckt haben.

Ich habe das Gleiche wie @marco-silva0000 in einem Fall gemacht, aber es ist ein offensichtlicher Hack und wenn Ihre Artikel nicht alle ungefähr die gleiche Größe haben, sieht es wahrscheinlich auch unten hässlich aus.

Bitte öffnen Sie @HelloEdit erneut. Ich stimme zu, dass dies ein riesiges Problem ist, die bereitgestellte "Lösung" ist nicht zufriedenstellend.
Darüber hinaus folgt es, wie bereits erwähnt, keinen materiellen Richtlinien.

Ich verstehe, dass Sie viel Arbeit haben und Ihre Bibliothek erstaunlich ist, aber dieser spezielle Punkt ist wirklich problematisch, wenn Sie ein vollständig ansprechendes Layout implementieren möchten.

@oliviertassinari Potenzial hier für ein Beispiellayout ...

Gibt es diesbezüglich Fortschritte?

Die Eigenschaft Grid rowHeight kann manuell festgelegt werden oder wird standardmäßig als 1:1 angenommen. Wenn wir eine Karte anzeigen, in der dynamische Daten geloopt werden, wird die Höhe nicht angepasst.

1. Fall 1, wenn die Karte 5 Daten aufnehmen kann und nur zwei Daten vorhanden sind, wird die Kartenhöhe angepasst, aber die Rasterhöhe bleibt 1:1.
2. Fall 2: Wenn die Karte 5 Werte aufnehmen kann, aber 7 vorhanden sind, werden die restlichen Daten ausgeschnitten und nie auf dem Bildschirm angezeigt.

Wenn es eine Lösung für dieses Problem gibt, wäre ich für ein Beispiel dankbar? Meine Stimme für die einheimische Unterstützung. Ich denke, dies ist eine grundlegende Funktionalität für die Grid-Komponente.

Wäre so etwas das, was Sie wollen: https://codesandbox.io/s/p5v42zrrzm
Es wird von CSS Grid unterstützt und kann daher nicht überall verwendet werden: https://caniuse.com/#feat =css-grid

@joshwooding Basierend auf dem, was ich auf meinem iPad sehen kann, sieht es sehr gut aus! Werde morgen auf dem Desktop nachschauen.

BEARBEITEN Sie nach der Überprüfung auf dem Desktop einige Probleme mit dieser Lösung:

1. Dies müsste auf der Grundlage von Breakpoints reagieren, genau wie das Grid jetzt ist.
2. Ich habe der MacCard Component ein paar Typografie-Elemente hinzugefügt (um Karten mit variabler Höhe zu simulieren, was mein Anwendungsfall ist), um sie höher zu machen. Danach hat das Ergebnis diese unerwünschten Leerräume zwischen den Zeilen. Somit funktioniert dies doch nicht. Screenshot unten:
   

Die Unterstützung des Mauerwerkslayouts in Grid wäre großartig 👍, theoretisch könnte die Verwendung von JS funktionieren, aber nicht ideal

CSS-Rasterlayout ist dafür nicht vorgesehen, siehe: https://github.com/w3c/csswg-drafts/issues/945

Eine vorübergehende Lösung besteht darin, Spalten nach Ihren Wünschen zu erstellen und zu verteilen
zum Beispiel
Hier habe ich zwei Spalten und teile sie, wenn ihr Schlüssel ungerade ist
und 1 Hauptraster mit All-in-One-Spalte für Mobilgeräte
Ich verstecke das erste auf smDown
und verstecke das Haupt in mdUp

Einige Neuigkeiten dazu?

Wenn es einfacher ist, Flexbox zu verwenden, muss es sicherlich ein Problem geben.

@CloudNineK Flexbox löst dieses Problem nicht (Grid basiert auf Flexbox). Sie müssen eine Mauerbibliothek verwenden, wenn Sie Inhalte gleichmäßig auf eine unterschiedliche Anzahl von Spalten verteilen möchten.

Ich möchte nur sagen, dass ich mir auch eine Art Mauerwerksfunktion von MUI wünschen würde. Vielleicht ändern Sie MuiGrid nicht, um die Funktionalität zu unterstützen, aber fügen Sie vielleicht stattdessen eine neue Komponente hinzu, die sie unterstützt. Als solches habe ich eine grobe Komponente entworfen, um MuiGrid für einen Masonry-Effekt zu umhüllen. Ich hoffe, dass dies vielleicht ein Anfang sein kann, um eine Komponente zu erstellen?

Hier für Interessierte: https://codesandbox.io/s/masonryplusmui-xk8rr?fontsize=14

Natürlich gibt es trotzdem Probleme. Die Art und Weise, wie es derzeit funktioniert, ist, dass es vordefinierte Breakpoints verwendet (ich ziehe das aus theme.breakpoints.values) und berechnet, wie viele Spalten basierend darauf erstellt werden sollen. Ich weiß, dass sich keine der Komponenten von MUI so verhält, aber zu diesem Zeitpunkt konnte ich mit dieser Methode wirklich nur die Breite einer ganzen Spalte festlegen.

@weiluntong Das ist auch eine mögliche Lösung, finde ich aber nicht elegant
Vielleicht sollte jemand das Labor abzweigen und eine PR oder einen Vorschlag dafür als neue Komponente machen

@nikandlv da stimme ich dir

@weiluntong Ich denke, du bist mit der Komponente auf dem richtigen Weg, es braucht wahrscheinlich etwas mehr Arbeit. Sie sollten jedoch die Betreuer fragen, ob sie dies als Teil von MUI oder nur als Bibliothek haben möchten, die Sie veröffentlichen können
und wie https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md sagt

Wenn Sie eine neue Komponente einreichen, fügen Sie diese bitte dem Lab hinzu.

https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab

Wir bräuchten mehr Stimmen zu diesem Thema, um eine Lösung des Problems in Betracht zu ziehen.

Wenn @weiluntong Sie immer noch das Gefühl haben, dass Sie die Zeit haben, einen Vorschlag zu erstellen, kann ich meine Stimme für eine separate dedizierte Mauerwerkskomponente abgeben. Könnte die einfachste Option für Wartung und Verwendung sein.

Ich habe die react-virtualized Masonry Komponente verwendet. react-virtualized funktioniert jedoch nicht mit den neuesten babel und core-js . Es scheint, dass sein Nachfolger react-window auch keine Masonry Komponente enthält . Vielleicht könnte die react-virtualized Masonry Komponente aktualisiert und in material-ui ?

Es würde mir nichts ausmachen, einen Vorschlag zusammenzustellen, bei dem wir positive Stimmen konsolidieren können. Gibt es eine Vorschlagsvorlage, die ich verwenden sollte?

@weiluntong Ich denke, als https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md solltest du ein Problem einreichen und die Komponentenanfrage dort beschreiben und um Upvotes bitten

@weiluntong Es gibt eine Vorlage, wenn Sie eine neue Ausgabe erstellen.

Korrigieren Sie mich, wenn ich etwas vermisse, aber ich konnte genau dieses Problem lösen, indem ich diese Lösung aus dem Stapelüberlauf anwendete:
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

Das ist nicht der Fall @dylanmartin, wir wollen nicht, dass es sich

Schließung für #17000