Material-ui: [Cuadrícula] Ajuste automático de altura (diseño adaptable)

Tengo la sensación de que lo que está tratando de lograr se puede implementar en el área de usuario y apuntar a un nicho, por esas razones, estoy cerrando el problema. Mantengamos la base del código simple.

Entiendo completamente el hecho de que la base del código sigue siendo simple, pero la especificación del material declara: "Los elementos de un formato de una sola columna pueden refluir para llenar el área de contenido en varias combinaciones".

Pero actualmente lo mejor que puedo hacer con Grid es esto:

Entonces creo seriamente que un código puede seguir siendo simple mientras tiene funcionalidades

Gracias,

PD: Si sabe que un componente PEQUEÑO produce el mismo resultado que la especificación, hágamelo saber.
(Pero sigo pensando que la integración en Material UI sería beneficiosa para todos)

Quizás esté buscando una biblioteca de mampostería: https://masonry.desandro.com/layout.html.

Sí, esta es una buena idea mientras se espera la integración nativa en Material UI _{^{si llega algún día :)}}

PD: ¿Puedes considerar la reapertura del tema?

Gracias,

Si necesita ayuda para integrar esta función, creo que puede obtener soporte sobre el código CSS del marco de trabajo de material de Google aquí.

¡Material ui es sin duda el mejor conjunto de componentes de React!

No creo que getmdl pueda hacerlo, no lo he comprobado, pero estoy bastante seguro de que el enlace que proporcionó es un ejemplo estático. Para contenido dinámico, lo he visto funcionando solo en la lista de cuadrícula de material angular 2 o en la material angular 1 . Pero usan un algoritmo complejo ...

Sí, tienes razón, pero nunca especifiqué que el contenido del tablero no debe ser estático 😄
Aparentemente, el material angular hace muy bien lo que la cuadrícula no hace ... ¡Pero con una lógica demasiado compleja!

En realidad, por lo que tengo entendido, algo que ya puede implementar con los puntos de interrupción de respuesta de Grid xs , sm , md , etc.
Si necesita algo "100%" automático, entonces una biblioteca de mampostería será más adecuada para sus necesidades, pero está fuera del alcance del proyecto.

Hola @oliviertassinari ,
Pero, ¿especificaciones de materiales para la rejilla? ¿Como expliqué en mi comentario anterior?

No entiendo cómo podría implementarlo con los puntos de interrupción, ¡la cuadrícula no permite una modificación de su tamaño! ¡El problema está aquí!

¿Por qué la segunda tarjeta musical no puede ir pegada a la tarjeta "aperçu"? Esto es contrario a la especificación del material.

De manera más general, ¿por qué la cuadrícula no deja la opción al usuario de colocar sus tarjetas como desee?

Espero que comprenda mi solicitud y que vuelva a abrir el problema.
Y sinceramente, no creo que esto esté fuera del proyecto, material.angular lo integró.

• Puede utilizar el componente de orden superior withWidth() para cambiar la estructura de la cuadrícula para los diferentes puntos de interrupción. La cuadrícula es una envoltura delgada sobre el modelo de caja flexible, cualquier cosa que este modelo de diseño permita hacer se puede lograr con el componente Cuadrícula.
• Además, puede cambiar la dirección de una fila a otra para tener el comportamiento deseado.

Hum, creo que podré arreglármelas, pero ¿es posible agregar este ejemplo en la documentación para principiantes que hagan la misma pregunta?
Necesito pensar en cómo implementaré mi tablero ... gracias por su ayuda

Oye, también me gustaría esta función, y no entendí cómo podría implementarse como se sugirió. HolaEditar, ¿lograste que esto funcionara? ¿Puede dar un ejemplo? Creo que este caso de uso debería estar en la documentación.

Oye, no encontré una solución (usar una biblioteca externa como la mampostería podría funcionar) Pero ninguna de forma nativa. ¡Todavía mantengo mi idea de implementar esta función de forma nativa!

Terminamos creando 2 columnas y dividimos los datos de manera uniforme. El problema es que si una de las columnas termina con todas las cartas más grandes, un lado puede ser mucho más largo que el otro.

Estoy de acuerdo con @HelloEdit . Este es un gran problema para no estar incluido en la cuadrícula. Me siento un poco aburrido por haber usado la cuadrícula Material-UI en primer lugar, porque ¿por qué querría usar una cuadrícula que se ve mal con huecos feos la mayor parte del tiempo y no sigue las especificaciones de Material-UI?

No tengo una sola cuadrícula en mi aplicación donde me gustaría que funcionara como lo hace la cuadrícula Material-UI y su página de documentación de cuadrícula es demasiado simplista para mostrar que así es como funcionan sus cuadrículas, así que no me di cuenta de esto era una "característica" de su cuadrícula antes de descubrirla en mi aplicación.

Hice lo mismo que hizo @ marco-silva0000 en una instancia, pero es un truco obvio y, a menos que todos sus elementos sean del mismo tamaño, es probable que también se vea feo en la parte inferior.

Vuelva a abrir @HelloEdit. Estoy de acuerdo en que este es un gran problema, la "solución" proporcionada no es satisfactoria.
Además, como se indicó anteriormente, no sigue las pautas materiales.

Entiendo que tiene mucho trabajo y su biblioteca es increíble, pero este punto específico es realmente problemático si desea implementar un diseño totalmente receptivo.

@oliviertassinari Potencial aquí para un ejemplo de diseño ...

¿Algún progreso en esto?

La propiedad Grid rowHeight se puede configurar manualmente o, de forma predeterminada, se asume que es 1: 1. Si mostramos una tarjeta dentro de la cual se colocan datos dinámicos, la altura no se ajusta.

1. Caso 1, si la tarjeta puede contener 5 datos y solo hay dos datos, la altura de la tarjeta se ajusta pero la altura de la cuadrícula sigue siendo 1: 1.
2. Caso 2, si la tarjeta puede contener 5 valores pero hay 7, los datos restantes se cortan y nunca se muestran en la pantalla.

Si hay alguna solución a este problema, ¿agradecería un ejemplo? Mi voto a favor del apoyo nativo. Creo que esta es una funcionalidad fundamental para el componente Grid.

¿Algo como esto sería lo que quieres? Https://codesandbox.io/s/p5v42zrrzm
Está impulsado por la cuadrícula CSS, por lo que no se puede usar en todas partes: https://caniuse.com/#feat = css-grid

@joshwooding Según lo que puedo ver en mi iPad, ¡se ve muy bien! Lo comprobaré mañana en el escritorio.

EDITAR después de verificar en el escritorio , un par de problemas con esta solución:

1. Esto debería responder en función de los puntos de interrupción, tal como lo es ahora la cuadrícula.
2. Agregué un par de elementos de tipografía al componente MacCard (para simular tarjetas de altura variable, que es mi caso de uso), haciéndolo más alto. Después de eso, el resultado tiene estos espacios vacíos no deseados entre filas. Por lo tanto, esto no funciona después de todo. Captura de pantalla a continuación:
   

El soporte de diseño de mampostería en Grid sería increíble 👍, en teoría, el uso de JS podría funcionar, pero no es ideal

El diseño de cuadrícula css no está diseñado para esto, consulte: https://github.com/w3c/csswg-drafts/issues/945

Una solución temporal será crear columnas como desee y distribuirlas.
por ejemplo
aquí tengo dos columnas y las divido si su clave es impar
y 1 cuadrícula principal con todo en una columna para dispositivos móviles
Oculto el primero en smDown
y ocultar el principal en mdUp

¿Alguna noticia sobre esto?

Cuando es más fácil usar flexbox, seguramente debe haber un problema.

@CloudNineK Flexbox no resuelve este problema (Grid está basado en flexbox). Debe utilizar una biblioteca de mampostería si desea distribuir el contenido de manera uniforme entre un número variable de columnas.

Solo me gustaría intervenir diciendo que también me gustaría haber visto algún tipo de funcionalidad de mampostería de MUI. Tal vez no cambie MuiGrid para admitir la funcionalidad, pero tal vez agregue un nuevo componente que lo admita. Como tal, elaboré un componente crudo para envolver MuiGrid para un efecto de mampostería. Espero que esto pueda ser un comienzo para la creación de un componente.

Aquí está para los interesados: https://codesandbox.io/s/masonryplusmui-xk8rr?fontsize=14

Sin embargo, por supuesto que hay problemas. La forma en que funciona actualmente es que toma puntos de interrupción predefinidos (los extraigo de theme.breakpoints.values) y calcula cuántas columnas hacer en función de eso. Sé que no es así como se comporta ninguno de los componentes de MUI, pero en este punto, realmente solo podría establecer el ancho de una columna completa con este método.

@weiluntong Esa también es una posible solución, sin embargo, no creo que sea elegante
tal vez alguien debería bifurcar el laboratorio y hacer un PR o una propuesta para esto como un nuevo componente

@nikandlv Estoy completamente de acuerdo contigo. Actualmente, la cosa está en una especie de limbo donde no es del todo MUI ni es un diseño de mampostería. Estaría más que feliz de crear un componente y hacer un PR. De hecho, eso es lo que esperaba que fuera mi objetivo final aquí, pero creé la caja de arena porque no estaba seguro de por dónde empezaría. Una vez más, esperaba que pudiera ser un comienzo. ¿O estoy completamente a la izquierda en cuanto a la estructura base del componente? Me encantaría recibir aportaciones que me pongan en marcha.

@weiluntong Creo que está en el camino correcto con el componente, probablemente necesite un poco más de trabajo. sin embargo, debe preguntar a los encargados del mantenimiento si quieren esto como parte de MUI o simplemente como una biblioteca que puede publicar.
y como dice https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md

Cuando envíe un nuevo componente, agréguelo al laboratorio.

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

Necesitaríamos más votos positivos sobre el tema para considerar la solución del problema.

Si @weiluntong todavía siente que tiene tiempo para preparar una propuesta, podría emitir mi voto hacia un componente de albañilería dedicado por separado. Podría ser la opción más fácil de mantenimiento y uso.

Estaba usando el componente react-virtualized Masonry . Sin embargo, react-virtualized no funciona con los últimos babel y core-js . Parece que también es poco probable que su sucesor react-virtualized Masonry podría actualizarse y adoptarse en material-ui ?

No me importaría armar una propuesta en la que podamos consolidar los votos a favor. ¿Hay alguna plantilla de propuesta que deba utilizar?

@weiluntong supongo que https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md debe enviar un problema y describir la solicitud del componente allí y pedir votos positivos

@weiluntong Hay una plantilla cuando crea una nueva edición.

Corríjame si me falta algo, pero pude resolver lo que parece ser este problema exacto aplicando esta solución del desbordamiento de pila:
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

Ese no es el caso

Cierre por # 17000