Я немного поиграю с Material-UI . Есть ли какие-нибудь варианты создания макета сетки (как в Bootstrap )?
Если нет, как можно добавить эту функцию?
Есть компонент GridList, но я предполагаю, что он имеет другое назначение.
reactjs
material-design
material-ui
grid-system
kharandziuk
источник
источник
Ответы:
Пользовательский интерфейс Material реализовал собственный макет Flexbox через компонент Grid .
Похоже, они изначально хотели сохранить себя просто библиотекой «компонентов». Но один из основных разработчиков решил, что не иметь своего собственного было слишком важно . Теперь он был объединен с основным кодом и выпущен с версией 1.0.0 .
Вы можете установить его через:
Теперь он находится в официальной документации с примерами кода .
источник
Select Field
. Я застрял в том, как использовать такие поля. Вы можете мне помочь?Select
он отсутствует, я только что заменил его переключателями, но я уверен, что скоро выбор будет перенесен из магистрали.Из описания спецификаций материального дизайна :
Если вам нужна гораздо более легкая библиотека компонентов Grid, я использую React-Flexbox-Grid , реализацию
flexboxgrid.css
в React.Вдобавок ко всему , React-Flexbox-Grid прекрасно работает как с material-ui , так и с react-toolbox (альтернативная реализация дизайна материалов).
источник
Я поискал ответ на этот вопрос и нашел лучший способ - использовать Flex и встроенные стили для разных компонентов.
Например, чтобы заставить два бумажных компонента разделить мой полный экран на 2 вертикальных компонента (в соотношении 1: 4), следующий код работает нормально.
Теперь, сделав еще несколько вычислений, вы можете легко разделить компоненты на странице.
Дополнительная информация о гибкости
источник
Надеюсь, еще не поздно дать ответ.
Я также искал простой, надежный, гибкий и легко настраиваемый начальный загрузчик, такой как система реактивной сетки, для использования в моих проектах.
Лучшее, что я знаю, это
react-pure-grid
https://www.npmjs.com/package/react-pure-grid.react-pure-grid
дает вам возможность настраивать каждый аспект вашей сеточной системы, в то же время он имеет встроенные значения по умолчанию, которые, вероятно, подходят для любого проектаиспользование
-
источник
Я захожу на http://getbootstrap.com/customize/ и проверяю только «сетку» для загрузки. Есть
bootstrap-theme.css
иbootstrap.css
в загруженных файлах, и мне нужно только последнее.Таким образом, я могу использовать сеточную систему Bootstrap со всем остальным из UI материала.
источник
Я просто использую https://react-bootstrap.github.io/ для адаптивного макета и Material-ui для всех компонентов.
источник
Мне было сложно найти структуру пользовательского интерфейса, которая бы реализовывала стандарты Material Design для отзывчивого поведения, поэтому я создал два пакета, реализующих сеточную систему для Material Design:
Эти пакеты соответствуют стандартам отзывчивого пользовательского интерфейса, установленным Google. Поддерживаются все размеры области просмотра, указанные в их стандартах, с учетом правильных желобов, рекомендуемого количества столбцов и даже поведения макета, превышающего 1600 dp. Он должен вести себя так, как рекомендовано для каждого устройства в руководстве по показателям устройств .
источник
Ниже приведено чисто MUI Grid система ,
С кодом ниже
↓ CodeSandbox ↓
источник
Это старый вопрос, но Google привел меня сюда. После небольшого поиска я нашел хороший пакет: https://www.npmjs.com/package/react-grid-system
Я считаю, что это лучший, простой в использовании и легкий.
источник
Вот пример системы сеток с material-ui, которая похожа на бутстрап:
источник