CODEWITHSUNDEEP
reactjstwitter-bootstrap-3material-ui
devwannabe
devwannabe

Reputation: 3210

Mimic bootstrap grid using Material-UI Grid list

I'm new to Material-ui and I'm using ReactJS. I have this jsfiddle but using Bootstrap. I would like to know how the 2 column panel with header should be coded using React Material-UI.

enter image description here

I want to achieve this layout - https://i.sstatic.net/lMD42.jpg

Here is bootstrap snippet:

<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/

Upvotes: 0

Views: 2022

Answers (2)

Fabian Bosler
Fabian Bosler

Reputation: 2510

I think the answer should be updated, as Material UI have implemented their own Flexbox layout very much like Bootstrap (https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui).

Note: this is not Material-UI Grid list though.

It appears they initially wanted to keep themselves as purely a 'components' library. But one of the core developers decided it was too important not to have their own. It has now been merged into the core code and it is on track to be released with v1.0.0.

Currently (April 2017) it's still on the next / alpha branch. You can install it via:

npm install material-ui@next

Credit for this answer to: icc97 - Material UI and Grid system

Upvotes: 1

szymonm
szymonm

Reputation: 1051

GridList in material-ui is not about grid layout. Take a look at material design guidelines:

Grid lists are an alternative to standard list views.

You would need to implement grid layout on your own or use some ready libraries. There are a lot of them, which are usually based on Bootstrap grid, or very alike:

You could probably find much more than that, just find the one that suits your needs best. Personally, I create my own Grid components to have a full control over that.

Upvotes: 0

Related Questions