Material-ui: [Сетка] Автоматическая регулировка высоты (Отзывчивый макет)

У меня такое чувство, что то, что вы пытаетесь выполнить, может быть реализовано в пользовательском пространстве и нацелено на нишу, по этим причинам я закрываю проблему. Давайте сделаем базу кода простой.

Я полностью понимаю тот факт, что основа кода осталась простой, но спецификация материала заявляет: «Элементы из одноколоночного формата могут переформатироваться, чтобы заполнить область содержимого в различных комбинациях».

Но в настоящее время лучшее, что я могу сделать с помощью Grid, это:

Тогда я серьезно думаю, что код может оставаться простым, но при этом имеет функциональность.

Благодарить,

PS: Если вы знаете, что МАЛЕНЬКИЙ компонент дает тот же результат, что и спецификация, дайте мне знать.
(Но я все же считаю, что интеграция в Material UI будет полезна для всех)

Возможно, вы ищете библиотеку каменной кладки: https://masonry.desandro.com/layout.html.

Да, это хорошая идея, пока вы ждете встроенной интеграции в Material UI, _{^{если она когда-нибудь появится :)}}

PS: Вы можете рассмотреть вопрос о повторном открытии вопроса?

Благодарить,

Если вам нужна помощь по интеграции этой функции, я думаю, вы можете получить поддержку по CSS-коду материальной структуры Google здесь.

Material ui, безусловно, лучший набор компонентов React!

Я не думаю, что getmdl может это сделать, я не проверял, но я почти уверен, что предоставленная вами ссылка является статическим примером. Для динамического контента я видел, что он работает только в списке сеток angular material 2 или angular material 1 grid list . Но они используют сложный алгоритм ...

Да, вы правы, но я никогда не указывал, что содержимое панели управления не должно быть статичным 😄
Судя по всему, материал angular очень хорошо справляется с тем, чего не делает сетка ... Но со слишком сложной логикой!

На самом деле, насколько я понимаю, это то, что вы уже можете реализовать с помощью чувствительных точек останова сетки xs , sm , md и т. Д.
Если вам нужно что-то "100% -ное" автоматическое, то библиотека каменной кладки лучше подойдет вам, но это выходит за рамки проекта.

Привет @oliviertassinari!
Но спецификации материалов для сетки? Как я объяснил в своем предыдущем комментарии?

Я не понимаю, как я мог бы реализовать это с помощью точек останова, сетка не позволяет изменять ее размер! Проблема здесь!

Почему вторая музыкальная карта не может прилипать к карте "aperçu"? Это противоречит спецификации материала.

В более общем плане, почему сетка не оставляет пользователю право размещать свои карты по своему желанию?

Надеюсь, вы поймете мою просьбу и снова откроете вопрос
И, честно говоря, я не думаю, что это выходит за рамки проекта, это интегрировано в material.angular.

• Вы можете использовать компонент withWidth() более высокого порядка, чтобы изменить структуру сетки для различных точек останова. Сетка - это тонкая оболочка над моделью flexbox, все, что позволяет делать эта модель макета, может быть достигнуто с помощью компонента Grid.
• Кроме того, вы можете изменить направление от строки к столбцу, чтобы добиться желаемого поведения.

Хм, думаю, я справлюсь, но можно ли добавить этот пример в документацию для начинающих, задающих такой же вопрос?
Мне нужно подумать о том, как я буду реализовывать свою дашборд ... спасибо за вашу помощь

Эй, мне бы тоже понравилась эта функция, и я не понимал, как ее можно реализовать, как было предложено. HelloEdit, вам удалось заставить это работать? вы можете привести пример? Я думаю, что этот вариант использования должен быть в документации.

Привет, я не нашел решения (используйте внешнюю библиотеку, например, masonry, может работать) Но изначально нет. Я все еще поддерживаю свою идею реализовать эту функцию изначально!

В итоге мы создали 2 столбца и равномерно разделили данные. Проблема в том, что если один из столбцов заканчивается всеми карточками побольше, одна сторона может быть намного длиннее другой.

Я согласен с @HelloEdit . Не попасть в сетку - большая проблема. Я чувствую себя хромым из-за того, что когда-либо использовал сетку Material-UI, потому что зачем мне использовать сетку, которая большую часть времени выглядит плохо с уродливыми промежутками и не соответствует спецификациям Material-UI?

У меня нет ни одной сетки в моем приложении, где я бы хотел, чтобы она работала, как сетка Material-UI, а ваша страница документации сетки слишком упрощена, чтобы показать, как работают ваши сетки, поэтому я не осознавал этого была «особенностью» вашей сетки до того, как обнаружила ее в моем приложении.

Я сделал то же самое, что и @ marco-silva0000 в одном случае, но это очевидный взлом, и если все ваши предметы примерно одинакового размера, они могут выглядеть некрасиво и внизу.

Пожалуйста, снова откройте @HelloEdit. Я согласен, что это огромная проблема, предоставленное «решение» не является удовлетворительным.
Более того, как указывалось ранее, он не следует руководящим принципам.

Я понимаю, что у вас много работы и ваша библиотека потрясающая, но этот конкретный момент действительно проблематичен, если вы хотите реализовать полностью адаптивный макет.

@oliviertassinari Здесь есть возможность для примера макета ...

Есть ли в этом прогресс?

Сетка rowHeight Свойство

1. Случай 1, если карта может содержать 5 данных и присутствуют только два данных, высота карты регулируется, но высота сетки остается равной 1: 1.
2. Случай 2. Если карта может содержать 5 значений, но присутствуют 7, то оставшиеся данные обрезаются и никогда не отображаются на экране.

Если доступно какое-либо решение этой проблемы, были бы признательны за пример? Мой голос в сторону родной поддержки. Я думаю, что это фундаментальная функциональность компонента Grid.

Что-то вроде этого будет тем, что вы хотите: https://codesandbox.io/s/p5v42zrrzm
Он работает на CSS-сетке, поэтому его нельзя использовать везде: https://caniuse.com/#feat = css-grid

@joshwooding Судя по тому, что я вижу на своем iPad, выглядит очень хорошо! Завтра проверю на десктопе.

ИЗМЕНИТЬ после проверки на рабочем столе , пара проблем с этим решением:

1. Это должно было бы быть отзывчивым на основе точек останова, как сейчас Grid.
2. Я добавил пару элементов типографики в компонент MacCard (для имитации карточек с переменной высотой, что является моим вариантом использования), сделав его выше. После этого в результате появляются нежелательные пустые промежутки между строками. Таким образом, это все-таки не работает. Снимок экрана ниже:
   

Поддержка макета Masonry в Grid была бы потрясающей 👍, теоретически использование JS может работать, но не идеально

Макет сетки css не предназначен для этого, см .: https://github.com/w3c/csswg-drafts/issues/945

Временным решением будет создание столбцов по вашему желанию и их распространение.
Например
здесь у меня есть два столбца и делим их, если их ключ нечетный
и 1 основная сетка со всем в одном столбце для мобильных
я прячу первый на smDown
и скрыть главное в mdUp

Какие-нибудь новости по этому поводу?

Когда проще использовать flexbox, наверняка проблема.

@CloudNineK Flexbox не решает эту проблему (Grid основан на Flexbox). Вам необходимо использовать масонную библиотеку, если вы хотите равномерно распределять контент между различным количеством столбцов.

Я просто хотел бы сказать, что я также хотел бы видеть какую-то функциональность каменной кладки из MUI. Может быть, не менять MuiGrid для поддержки функциональности, но, возможно, вместо этого добавить новый компонент, который его поддерживает. Таким образом, я нарисовал грубый компонент, чтобы обернуть MuiGrid для эффекта масонства. Надеюсь, это может стать началом создания компонента?

Вот для интересующихся: https://codesandbox.io/s/masonryplusmui-xk8rr?fontsize=14

Конечно, есть проблемы. То, как он работает в настоящее время, заключается в том, что он принимает предопределенные точки останова (я беру их из theme.breakpoints.values) и вычисляет, сколько столбцов нужно создать на основе этого. Я знаю, что ни один из компонентов MUI не ведет себя так, но на данный момент я действительно мог установить только ширину всего столбца с помощью этого метода.

@weiluntong Это тоже возможное решение, но я не думаю, что это элегантно
может быть, кто-то должен разветвить лабораторию и сделать PR или предложение для этого в качестве нового компонента

@nikandlv Полностью согласен с вами. В настоящее время эта штука находится в своего рода подвешенном состоянии, где это не совсем MUI и не совсем макет Masonry. Я был бы более чем счастлив создать компонент и устроить пиар. Фактически, я надеялся, что это будет моей конечной целью, но я создал песочницу, потому что не был уверен, с чего начать. Опять же, я надеялся, что это может быть начало? Или я полностью покинул поле зрения базовой структуры компонента? Я хотел бы получить информацию, которая меня подтолкнет.

@weiluntong Я думаю, что вы на правильном пути с компонентом, вероятно, нужно немного поработать. однако вы должны спросить сопровождающих, хотят ли они, чтобы это было частью MUI или просто как библиотеку, которую вы можете опубликовать.
и как говорит https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md

При отправке нового компонента добавьте его в лабораторию.

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

Нам нужно больше голосов по этому вопросу, чтобы рассмотреть возможность решения проблемы.

Если на @weiluntong вы все еще чувствуете, что у вас есть время подготовить предложение, я могу отдать свой голос за отдельный компонент каменной кладки . Возможно, это самый простой вариант для обслуживания и использования.

Я использовал компонент react-virtualized Masonry . Однако react-virtualized не работает с последними версиями babel и core-js . Похоже, что его преемник react-window также вряд ли будет включать компонент Masonry . Возможно, компонент react-virtualized Masonry может быть обновлен и адаптирован в material-ui ?

Я был бы не против составить предложение, в котором мы могли бы объединить голоса за. Есть ли шаблон предложения, который мне следует использовать?

@weiluntong, я думаю, https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md вы должны отправить проблему и описать компонентный запрос там и попросить проголосовать за

@weiluntong При создании нового выпуска есть шаблон.

Поправьте меня, если я чего-то упускаю, но я смог решить, как представляется, именно эту проблему, применив это решение из переполнения стека:
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

Это не тот случай, @dylanmartin: мы не хотим, чтобы он растягивался, мы хотим, чтобы следующая строка заполнила этот пробел!

Закрытие на # 17000