Mimic bootstrap grid с использованием Material-UI Список сетки

Question

Я новичок в Material-ui, и я использую ReactJS. У меня есть этот jsfiddle, но с помощью Bootstrap. Я хотел бы знать, как должна быть закодирована панель с колонкой 2 с заголовком, используя React Material-UI.

Я хочу добиться этого макета - http://imgur.com/a/bzkOd

Вот самозагрузки сниппет:

<div class="row"> 
    <div class="col-xs-12">Header</div> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
     <div class="row"> 
      <!-- Left side --> 
      <div class="col-xs-3"> 
       <div class="row"> 
        <!-- 1st column --> 
        <div class="col-xs-12">Menu 1</div> 
        <div class="col-xs-12">Menu 2</div> 
        <div class="col-xs-12">Menu 3</div> 
        <div class="col-xs-12">Menu 4</div> 
        <div class="col-xs-12">Menu 5</div> 
        <div class="col-xs-12">Menu 6</div> 
       </div> 
      </div> 

      <!-- Right side --> 
      <div class="col-xs-9"> 
       <div class="row"> 
        <!-- 3rd column --> 
        <div class="col-xs-12">Dashboard</div> 
        <!-- 4th column --> 
        <div class="col-xs-12">Device Statistics</div> 
        <!-- colspan 2 --> 
        <div class="col-xs-12">Device Health</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

https://jsfiddle.net/wLob4p03/1/

Answer 1

GridList в material-ui не о макете сетки. Взгляните на material design guidelines:

Сетка списки являются альтернативой стандартным представлениям списка.

Вам понадобится реализовать макет сетки самостоятельно или использовать некоторые готовые библиотеки. Есть много из них, которые, как правило, на основе Bootstrap сетки, или очень похожи:

• bootstrap-grid-react
• ReactGrid
• react-virtualized (для некоторых более продвинутых потребностей)

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

Answer 2

Я думаю, что ответ должен быть обновлен, так как материальный интерфейс реализовал собственный формат Flexbox, очень похожий на Bootstrap (https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui).

Примечание: это не список материалов-UI Grid.

Кажется, они изначально хотели сохранить себя как «библиотеку компонентов». Но один из основных разработчиков решил, что слишком важно не иметь своих собственных. Теперь он был объединен с основным кодом, и он будет выпущен с версии 1.0.0.

В настоящее время (апрель 2017 года) он все еще находится на следующей/альфа-ветке. Вы можете установить его с помощью:

npm install material-ui@next

Кредит на этот ответ: icc97 - Material UI and Grid system