Система сетки React Material-UI

Я ищу способ реализовать отзывчивую систему сетки для разработки приложений для дизайна материалов с использованием реакции и material-ui.
Пока у React-Bootstrap есть это, я не нашел ничего подобного с Material-UI. GridList — это хорошо, но не совсем то же самое. Есть ли какое-нибудь решение для этого?


reactjs material-design material-ui grid-system
person Gershon Papi    schedule 19.05.2016    source источник
comment
Я считаю, что это все еще в их дорожной карте github.com/callemall/material-ui/issues/3614. . Я ищу альтернативы и другие вещи, которые в настоящее время я делаю с помощью системы сетки uikit.   -  person Anton    schedule 19.05.2016
comment
в чем причина не использовать решение для начальной загрузки? если вы используете веб-пакет или инструмент сборки, который поддерживает встряхивание деревьев, вы не включаете в свой пакет не связанные вещи. Просто сетка.   -  person Avraam Mavridis    schedule 19.05.2016
comment
@AvraamMavridis, разве это не уродливое решение? Кто может мне пообещать, что эти 2 фреймворка совместимы друг с другом?   -  person Gershon Papi    schedule 19.05.2016
comment
@GershonPapi Насколько я видел, material-ui использует встроенный стиль, поэтому, вероятно, у вас не возникнет проблем. Но, да, я согласен, что это уродливое решение, но опять же, мне кажется, это единственное решение, если вы не хотите создавать свою собственную сетку.   -  person Avraam Mavridis    schedule 19.05.2016
comment
@AvraamMavridis k, спасибо. Я также думал о переходе на react-toolbox или react-mdl (еще один фреймворк для дизайна материалов), у которого есть системы сеток, какие-нибудь мнения об этих фреймворках?   -  person Gershon Papi    schedule 19.05.2016
comment
@GershonPapi react-mdl хорош, но не так материален, как material-ui.   -  person Avraam Mavridis    schedule 19.05.2016

Ответы (4)


arrow_upward
2
arrow_downward

Вместо того, чтобы использовать встроенный стиль для material-ui, я использую bootstrap с Material-UI. это работает хорошо и просто. Вот пример.

<div className="Container">
<button className="btn btn-primary"> Action</button>
<div className="row">

     <div className="col-sm-4">
           <ReactAutoForm collection={DoctorCategories} type="insert" debug={true} />
      </div>

      <div className="col-sm-8">
            <table><TableHeader><TableRow>
                                        <TableHeaderColumn>Name</TableHeaderColumn>
                                        <TableHeaderColumn>Description</TableHeaderColumn>
                                        <TableHeaderColumn>Edit</TableHeaderColumn>
                                    </TableRow>
      </TableHeader>
      <TableBody>
</TableBody>
 </TableBody>
                            </table>
                            </div>

</div>
</div>
person Umar Abbas    schedule 19.05.2016

arrow_upward
2
arrow_downward

Похоже, что react-inline-grid (http://broucz.github.io/react-inline-grid/) может быть хорошим решением этой проблемы.

Концепции, лежащие в основе этой библиотеки, очень близки к концепциям сетки Bootstrap, и в ней используется встроенный стиль.

person Lionel    schedule 26.05.2016

arrow_upward
2
arrow_downward

Я создал два пакета, которые реализуют систему сетки для Material Design. Первый, material-responsive-grid, представляет собой структуру CSS, а второй, react-material-responsive-grid — это набор компонентов React. которые реализуют эту структуру.

Эти пакеты соответствуют стандартам адаптивного пользовательского интерфейса, разработанным Google, Мне не нужно выбирать различные точки останова, которые были реализованы в любой другой среде пользовательского интерфейса. Все размеры области просмотра, указанные в их стандартах, поддерживаются с учетом правильных отступов, рекомендуемого количества столбцов и даже поведения макета, превышающего 1600 dp. Он должен вести себя в соответствии с рекомендациями для каждого устройства в руководстве по Device Metrics.

Каждый пакет доступен на github и включает пример приложения React.

Дайте знать, если у вас появятся вопросы.

person Ken Gregory    schedule 20.03.2017

arrow_upward
0
arrow_downward

Теперь у Material-UI есть собственный Flexbox Layout. Он находится в альфа-ветке. Вы можете использовать его в последней сборке Material-UI.

npm install material-ui@next

Для получения более подробной документации и примеров вы можете посетить эту ссылку https://material-ui-1dab0.firebaseapp.com/layout/responsive-uie-ui

person Rohit Luthra    schedule 05.05.2017