Material-ui: [Grade] Ajuste automático de altura (Layout Responsivo)

Tenho a sensação de que o que você está tentando realizar pode ser implementado no userland e atingir um nicho, por essas razões, estou encerrando o problema. Vamos manter a base do código simples.

Compreendo perfeitamente o fato de que a base do código permaneceu simples, mas a especificação do material declara: "Elementos de um formato de coluna única podem refluir para preencher a área de conteúdo em várias combinações."

Mas atualmente o melhor que posso fazer com o Grid é o seguinte:

Então eu acho seriamente que um código pode permanecer simples enquanto tem funcionalidades

Obrigado,

PS: Se você conhece um componente PEQUENO que produz o mesmo resultado da especificação, me avise.
(Mas ainda acho que a integração no Material UI seria benéfica para todos)

Talvez você esteja procurando por uma biblioteca de alvenaria: https://masonry.desandro.com/layout.html.

Sim, essa é uma boa ideia enquanto aguarda a integração nativa na IU do material, _{^{se chegar um dia :)}}

PS: Você pode considerar a reabertura da edição?

Obrigado,

Se precisar de ajuda para integrar este recurso, acho que pode ter suporte no código CSS do framework material do Google aqui

Material ui é certamente o melhor conjunto de componentes React!

Não acho que getmdl possa fazer isso, não verifiquei, mas tenho certeza de que o link que você forneceu é um exemplo estático. Para conteúdo dinâmico, eu o vi funcionando apenas na lista de grade de material angular 2 ou material angular 1 . Mas eles usam um algoritmo complexo ...

Sim, você está certo, mas nunca especifiquei que o conteúdo do painel não deve ser estático 😄
Aparentemente, o material angular faz muito bem o que a grade não faz ... Mas com uma lógica muito complexa!

Na verdade, pelo que entendi, isso é algo que você já pode implementar com os pontos de interrupção responsivos da Grade xs , sm , md , etc.
Se você precisa de algo "100%" automático, uma biblioteca de alvenaria será mais adequada para o que você precisa, mas está fora do escopo do projeto.

Olá @oliviertassinari ,
Mas especificações de materiais para a grade? Como expliquei no meu comentário anterior?

Não entendi como poderia implementá-lo com os breakpoints, a grade não permite modificação do seu tamanho! O problema está aqui!

Por que o segundo cartão de música não pode ficar grudado no cartão de “aperçu”? Isso é contrário à especificação do material.

De forma mais geral, por que a grade não deixa ao usuário a escolha de colocar seus cartões como ele deseja?

Espero que você entenda minha solicitação e reabra o problema
E, sinceramente, não acho que isso esteja fora do projeto, material.angular integrou-o.

• Você pode usar o componente de ordem superior withWidth() para alterar a estrutura da grade para os diferentes pontos de interrupção. A grade é um invólucro fino sobre o modelo flexbox, qualquer coisa que esse modelo de layout permite fazer pode ser conseguida com o componente Grade.
• Além disso, você pode alterar a direção de linha para coluna para ter o comportamento desejado.

Hum, acho que vou conseguir dar conta, mas será que é possível adicionar esse exemplo na documentação para iniciantes fazendo a mesma pergunta?
Preciso pensar em como implementarei meu painel ... obrigado pela ajuda

Ei, eu também gostaria desse recurso e não entendi como poderia ser implementado conforme sugerido. HelloEdit, você conseguiu fazer isso funcionar? você pode dar um exemplo? Acho que esse caso de uso deve estar na documentação.

Ei, eu não encontrei uma solução (usar uma biblioteca externa como a alvenaria poderia funcionar) Mas nenhuma nativamente. Ainda mantenho minha ideia de implementar esse recurso nativamente!

Acabamos criando 2 colunas e dividimos os dados uniformemente. O problema é que, se uma das colunas terminar com todas as cartas maiores, um lado pode ser muito mais longo que o outro.

Eu concordo com @HelloEdit . Este é um grande problema para não ser incluído na grade. Eu me sinto meio chato por usar a grade Material-UI em primeiro lugar, porque por que eu iria querer usar uma grade que parece ruim com lacunas feias na maioria das vezes e não segue as especificações do Material-UI?

Não tenho uma única grade em meu aplicativo onde gostaria que funcionasse como a grade Material-UI e sua página de documentação da grade é muito simplista para mostrar que é assim que suas grades funcionam, então eu não percebi isso era um "recurso" de sua grade antes de descobri-lo em meu aplicativo.

Fiz a mesma coisa que @ marco-silva0000 fez em uma instância, mas é um hack óbvio e, a menos que seus itens sejam quase do mesmo tamanho, é provável que fiquem feios na parte inferior também.

Por favor, reabra @HelloEdit . Concordo que este é um grande problema, a "solução" fornecida não é satisfatória.
Além disso, conforme afirmado anteriormente, não segue as diretrizes materiais.

Eu entendo que você tem muito trabalho e sua biblioteca é incrível, mas este ponto específico é realmente problemático se você deseja implementar um layout totalmente responsivo.

@oliviertassinari Potencial aqui para um layout de exemplo ...

Algum progresso nisso?

A propriedade da grade rowHeight pode ser definida manualmente ou, por padrão, assume ser 1: 1. Se exibirmos um cartão dentro do qual os dados dinâmicos são inseridos, a altura não será ajustada.

1. Caso 1, se o cartão pode conter 5 dados e apenas dois dados estão presentes, a altura do cartão é ajustada, mas a altura da grade continua a ser 1: 1.
2. Caso 2, se o cartão pode conter 5 valores, mas 7 estão presentes, então os dados restantes são cortados e nunca exibidos na tela.

Se alguma solução para este problema estiver disponível, gostaria de um exemplo? Meu voto para o apoio nativo. Acho que essa é uma funcionalidade fundamental para o componente Grid.

Algo assim é o que você deseja: https://codesandbox.io/s/p5v42zrrzm
É alimentado por CSS grid, portanto não pode ser usado em qualquer lugar: https://caniuse.com/#feat = css-grid

@joshwooding Com base no que posso ver no meu iPad, parece muito bom! Vou verificar amanhã no desktop.

EDITAR após verificar no desktop , alguns problemas com esta solução:

1. Isso precisaria ser responsivo com base em pontos de interrupção, assim como o Grid está agora.
2. Eu adicionei alguns elementos de tipografia ao componente MacCard (para simular cartões de altura variável, que é meu caso de uso), tornando-o mais alto. Depois disso, o resultado tem esses espaços vazios indesejados entre as linhas. Portanto, isso não funciona, afinal. Captura de tela abaixo:
   

O suporte de layout de alvenaria no Grid seria incrível 👍, em teoria, usar JS poderia funcionar, mas não ideal

O layout da grade css não se destina a isso, consulte: https://github.com/w3c/csswg-drafts/issues/945

Uma solução temporária será criar colunas como você quiser e distribuí-las
por exemplo
aqui eu tenho duas colunas e divido-as se a chave for ímpar
e 1 grade principal com tudo em uma coluna para celular
Eu escondo o primeiro no smDown
e ocultar o principal no mdUp

Alguma notícia sobre isso?

Quando é mais fácil usar apenas o flexbox, certamente deve haver um problema.

@CloudNineK Flexbox não resolve este problema (a grade é baseada em flexbox). Você precisa usar uma biblioteca maçonária se desejar distribuir o conteúdo uniformemente entre um número variável de colunas.

Eu gostaria apenas de dizer que também gostaria de ver algum tipo de funcionalidade de alvenaria do MUI. Talvez não mude o MuiGrid para suportar a funcionalidade, mas talvez adicione um novo componente que o suporte. Como tal, desenhei um componente bruto para envolver o MuiGrid para um efeito de Maçonaria. Espero que isso possa ser um começo para a criação de um componente.

Aqui está para os interessados: https://codesandbox.io/s/masonryplusmui-xk8rr?fontsize=14

Claro que há problemas. A maneira como funciona atualmente é que ele pega pontos de interrupção predefinidos (eu puxo isso de theme.breakpoints.values) e calcula quantas colunas fazer com base nisso. Eu sei que não é assim que qualquer um dos componentes do MUI se comporta, mas neste ponto, eu só poderia definir a largura de uma coluna inteira com este método.

@weiluntong Essa também é uma solução possível, mas não acho que seja elegante
talvez alguém deva bifurcar o laboratório e fazer um pré ou uma proposta para isso como um novo componente

@nikandlv Concordo totalmente com você. Atualmente a coisa está em uma espécie de limbo onde não é exatamente MUI nem é exatamente um layout de Maçonaria. Eu ficaria mais do que feliz em criar um componente e fazer um PR. Na verdade, era isso que eu esperava que fosse meu objetivo final aqui, mas criei a caixa de areia porque não tinha certeza de por onde começar. Mais uma vez, esperava que fosse um começo. Ou deixei completamente de lado a estrutura básica do componente? Eu adoraria informações que me ajudassem.

@weiluntong Acho que você está no caminho certo com o componente, ele provavelmente precisa de um pouco mais de trabalho. no entanto, você deve perguntar aos mantenedores se eles querem isso como parte do MUI ou apenas como uma biblioteca que você pode publicar
e como https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md diz

Ao enviar um novo componente, adicione-o ao laboratório.

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

Precisaríamos de mais votos positivos sobre a questão para considerar a solução do problema.

Se @weiluntong você ainda achar que tem tempo para preparar uma proposta, posso votar em um componente de alvenaria separado e dedicado. Pode ser a opção mais fácil de manutenção e uso.

Eu estava usando o componente react-virtualized Masonry . No entanto, react-virtualized não está funcionando com os babel e core-js mais recentes . Parece que seu sucessor react-window também não deve incluir um componente Masonry . Talvez o componente react-virtualized Masonry pudesse ser atualizado e adotado em material-ui ?

Eu não me importaria de montar uma proposta onde possamos consolidar votos positivos. Existe um modelo de proposta que devo usar?

@weiluntong eu acho que https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md você deve enviar um problema e descrever a solicitação de componente lá e pedir votos positivos

@weiluntong Existe um modelo quando você cria um novo problema.

Corrija-me se estiver faltando alguma coisa, mas consegui resolver o que parece ser exatamente esse problema aplicando esta solução de estouro de pilha:
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

Esse não é o caso,

Fechando para # 17000