Material-ui: [Grille] Réglage automatique de la hauteur (Mise en page réactive)

J'ai le sentiment que ce que vous essayez d'accomplir peut être mis en œuvre sur le territoire de l'utilisateur et cibler une niche, pour ces raisons, je clos le sujet. Gardons la base de code simple.

Je comprends parfaitement le fait que la base du code est restée simple, mais la spécification matérielle déclare : « Les éléments d'un format à une seule colonne peuvent redistribuer pour remplir la zone de contenu dans diverses combinaisons.

Mais actuellement, le mieux que je puisse faire avec Grid est le suivant :

Alors je pense sérieusement qu'un code peut rester simple tout en ayant des fonctionnalités

Remercier,

PS : Si vous connaissez un PETIT composant pour faire le même résultat que le cahier des charges, faites le moi savoir.
(Mais je pense toujours que l'intégration dans Material UI serait bénéfique pour tout le monde)

Vous cherchez peut-être une bibliothèque de maçonnerie : https://masonry.desandro.com/layout.html.

Ouais, c'est une bonne idée en attendant l'intégration native dans Material UI _{^{Si ça vient un jour :)}}

PS : Pouvez-vous envisager la réouverture du numéro ?

Remercier,

Si vous avez besoin d'aide pour intégrer cette fonctionnalité, je pense que vous pouvez prendre en charge le code CSS du framework matériel de Google ici

Material ui est certainement le meilleur ensemble de composants React !

Je ne pense pas que getmdl puisse le faire, je n'ai pas vérifié mais je suis à peu près sûr que le lien que vous avez fourni est un exemple statique. Pour le contenu dynamique, je l'ai vu fonctionner uniquement dans la liste de grille de matériau angulaire 2 ou la matériau angulaire 1 . Mais ils utilisent un algorithme complexe...

Ouais, tu as raison, mais je n'ai jamais précisé que le contenu du tableau de bord ne doit pas être statique
Apparemment, la matière angulaire fait très bien ce que la grille ne fait pas... Mais avec une logique trop complexe !

En fait, d'après ce que j'ai compris, c'est quelque chose que vous pouvez déjà implémenter avec les points d'arrêt réactifs de la grille xs , sm , md , etc.
Si vous avez besoin de quelque chose d'automatique à 100 %, une bibliothèque de maçonnerie sera mieux adaptée à vos besoins, mais elle sort du cadre du projet.

Bonjour @oliviertassinari ,
Mais spécifications matérielles pour la grille ? Comme je l'ai expliqué dans mon commentaire précédent ?

Je ne comprends pas comment j'ai pu l'implémenter avec les points d'arrêt, la grille ne permet pas une modification de sa taille ! Le problème est là !

Pourquoi la deuxième carte musicale ne peut pas aller coller à la carte "aperçu" ? Ceci est contraire aux spécifications matérielles.

Plus généralement, pourquoi grid ne laisse pas le choix à l'utilisateur de placer ses cartes comme il le souhaite ?

J'espère que vous comprendrez ma demande, et que vous rouvrirez le sujet
Et sincèrement, je ne pense pas que ce soit en dehors du projet, material.angular l'a intégré.

• Vous pouvez utiliser le composant d'ordre supérieur withWidth() pour modifier la structure de la grille pour les différents points d'arrêt. La grille est une enveloppe mince sur le modèle flexbox, tout ce que ce modèle de mise en page permet de faire peut être réalisé avec le composant Grid.
• En outre, vous pouvez changer la direction de la ligne à la colonne pour obtenir le comportement souhaité.

Hum, je pense que je vais pouvoir m'en sortir, mais si c'est possible d'ajouter cet exemple dans la documentation pour les débutants se posant la même question ?
Je dois réfléchir à la façon dont je vais implémenter mon tableau de bord ... merci pour votre aide

Hé, j'aimerais aussi cette fonctionnalité, et je ne comprenais pas comment elle pouvait être implémentée comme suggéré. HelloEdit, as-tu réussi à faire fonctionner ça ? Pouvez vous donner un exemple? Je pense que ce cas d'utilisation devrait être dans la documentation.

Hé, je n'ai pas trouvé de solution (utiliser une bibliothèque externe comme la maçonnerie pourrait fonctionner) Mais aucune nativement. Je maintiens toujours mon idée d'implémenter cette fonctionnalité nativement !

Nous avons fini par créer 2 colonnes et répartir les données de manière égale. Le problème est que si l'une des colonnes se retrouve avec toutes les plus grosses cartes, un côté peut être beaucoup plus long que l'autre.

Je suis d'accord avec @HelloEdit . C'est un gros problème de ne pas être inclus dans la grille. Je me sens un peu boiteux pour toujours en utilisant la grille Material-UI en premier lieu, car pourquoi voudrais-je utiliser une grille qui semble mauvaise avec des lacunes la plupart du temps et qui ne respecte pas les spécifications Material-UI ?

Je n'ai pas une seule grille dans mon application où je voudrais qu'elle fonctionne comme la grille Material-UI et votre page de documentation de grille est trop simpliste pour montrer que c'est ainsi que vos grilles fonctionnent, donc je ne l'ai pas réalisé était une "fonctionnalité" de votre grille avant de la découvrir dans mon application.

J'ai fait la même chose que @ marco-silva0000 l'a fait dans un cas, mais c'est un hack évident et à moins que vos articles aient tous à peu près la même taille, il est probable qu'ils soient aussi laids en bas.

Veuillez rouvrir @HelloEdit Je suis d'accord qu'il s'agit d'un énorme problème, la "solution" fournie n'est pas satisfaisante.
De plus, comme indiqué précédemment, il ne suit pas les directives matérielles.

Je comprends que vous avez beaucoup de travail et que votre bibliothèque est incroyable, mais ce point précis est vraiment problématique si vous souhaitez implémenter une mise en page entièrement réactive.

@oliviertassinari Potentiel ici pour un exemple d'aménagement...

Des progrès à ce sujet ?

La propriété Grid rowHeight peut être définie manuellement ou par défaut, elle est supposée être 1:1. Si nous affichons une carte à l'intérieur de laquelle des données dynamiques sont bouclées, la hauteur n'est pas ajustée.

1. Cas 1, si la carte peut contenir 5 données et que seules deux données sont présentes, la hauteur de la carte est ajustée mais la hauteur de la grille reste à 1:1.
2. Cas 2, Si la carte peut contenir 5 valeurs mais que 7 sont présentes alors les données restantes sont coupées et ne s'affichent jamais à l'écran.

Si une solution à ce problème est disponible, apprécieriez-vous un exemple? Mon vote pour le soutien natif. Je pense que c'est une sorte de fonctionnalité fondamentale pour le composant Grid.

Est-ce que quelque chose comme ceci serait ce que vous voulez : https://codesandbox.io/s/p5v42zrrzm
Il est alimenté par la grille CSS, il ne peut donc pas être utilisé partout : https://caniuse.com/#feat =css-grid

@joshwooding D'après ce que je peux voir sur mon iPad, ça a l'air très bien ! Je vérifierai demain sur le bureau.

EDIT après vérification sur le bureau , quelques problèmes avec cette solution :

1. Cela devrait être réactif en fonction des points d'arrêt, tout comme la grille l'est maintenant.
2. J'ai ajouté quelques éléments de typographie au composant MacCard (pour simuler des cartes à hauteur variable, ce qui est mon cas d'utilisation), ce qui le rend plus grand. Après cela, le résultat a ces espaces vides indésirables entre les lignes. Ainsi, cela ne fonctionne pas après tout. Capture d'écran ci-dessous :
   

La prise en charge de la disposition de la maçonnerie dans Grid serait géniale, en théorie, l'utilisation de JS pourrait fonctionner mais pas idéale

la disposition de la grille css n'est pas destinée à cela, voir : https://github.com/w3c/csswg-drafts/issues/945

Une solution temporaire sera de créer des colonnes comme vous le souhaitez et de les diffuser
par exemple
ici j'ai deux colonnes et les divise si leur clé est impaire
et 1 grille principale avec tout en une colonne pour mobile
je cache le premier sur smDown
et masquer le principal dans mdUp

Des nouvelles à ce sujet ?

Quand il est plus facile d'utiliser simplement flexbox, il doit sûrement y avoir un problème.

@CloudNineK Flexbox ne résout pas ce problème (Grid est basé sur flexbox). Vous devez utiliser une bibliothèque maçonnique si vous souhaitez répartir le contenu uniformément entre un nombre variable de colonnes.

Je voudrais juste dire que j'aimerais aussi voir une sorte de fonctionnalité de maçonnerie de MUI. Peut-être ne pas changer MuiGrid pour prendre en charge la fonctionnalité, mais peut-être ajouter un nouveau composant qui la prend en charge à la place. En tant que tel, j'ai élaboré un composant brut pour envelopper MuiGrid pour un effet de maçonnerie. J'espère que cela peut peut-être être un début pour créer un composant?

Le voici pour ceux que ça intéresse : https://codesandbox.io/s/masonryplusmui-xk8rr?fontsize=14

Bien sûr, il y a des problèmes cependant. La façon dont cela fonctionne actuellement est qu'il prend des points d'arrêt prédéfinis (je tire cela de theme.breakpoints.values) et qu'il calcule le nombre de colonnes à créer en fonction de cela. Je sais que ce n'est pas ainsi que se comportent les composants de MUI, mais à ce stade, je ne pouvais vraiment définir que la largeur d'une colonne entière avec cette méthode.

@weiluntong C'est aussi une solution possible mais je ne pense pas que ce soit élégant
peut-être que quelqu'un devrait bifurquer le laboratoire et faire un pr ou une proposition pour cela en tant que nouveau composant

@nikandlv je suis tout à fait d'accord avec toi. Actuellement, la chose est dans une sorte de limbes où ce n'est pas tout à fait MUI ni tout à fait une mise en page de maçonnerie. Je serais plus qu'heureux de créer un composant et de faire un PR. En fait, c'est ce que j'espérais être mon objectif final ici, mais j'ai créé le bac à sable parce que je ne savais pas trop par où commencer. Encore une fois, j'espérais que ce pourrait être un début? Ou suis-je complètement à gauche quant à la structure de base du composant ? Je serais ravi d'avoir des commentaires pour me lancer.

@weiluntong Je pense que vous êtes sur la bonne voie avec le composant, il a probablement besoin d'un peu plus de travail. Cependant, vous devriez demander aux responsables s'ils veulent que cela fasse partie de MUI ou simplement comme une bibliothèque que vous pouvez publier
et comme le dit https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md

Lorsque vous soumettez un nouveau composant, veuillez l'ajouter au laboratoire.

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

Nous aurions besoin de plus de votes positifs sur la question pour envisager de résoudre le problème.

Si @weiluntong vous pensez toujours que vous avez le temps de préparer une proposition, je pourrais voter pour un composant de maçonnerie dédié distinct. Peut-être l'option la plus simple pour l'entretien et l'utilisation.

J'utilisais le composant react-virtualized Masonry . Cependant, react-virtualized ne fonctionne pas avec les derniers babel et core-js . Il semble que son successeur react-window soit également peu susceptible d'inclure un composant Masonry . Peut-être que le composant react-virtualized Masonry pourrait être mis à jour et adopté dans material-ui ?

Cela ne me dérangerait pas de préparer une proposition où nous pouvons consolider les votes positifs. Y a-t-il un modèle de proposition que je devrais utiliser ?

@weiluntong je suppose que https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md vous devriez soumettre un problème et décrire la demande de composant là-bas et demander des votes positifs

@weiluntong Il existe un modèle lorsque vous créez un nouveau problème.

Corrigez-moi s'il me manque quelque chose, mais j'ai pu résoudre ce qui semble être exactement ce problème en appliquant cette solution à partir du débordement de la pile :
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

Ce n'est pas le cas @dylanmartin nous ne voulons pas qu'il s'étire, nous voulons que la rangée suivante comble cette lacune !

Clôture pour #17000