What are predefined classes for grid layout in Angular Material? We have "row","col-sm-4" etc.. classes in bootstrap. Do we have these type of classes in Angular Material 2?
Thanks.
-
1material.angular.io/components/grid-list/overviewmxr7350– mxr73502017-10-03 13:17:59 +00:00Commented Oct 3, 2017 at 13:17
Add a comment
|
2 Answers
I'll give you the basics.
In Angular Material (for Angular 2/4) the most commonly used attributes are:
fxLayout="row | column"
fxLayoutAlign="start | center | end | stretch | space-around | space-between | none" (can accept 2 properties at the same time)
fxFlex="number" (can accept numbers from 1 to 100)
You can also use postfix as fxLayout.xs and so on to apply rules only for specific resolution.
For more info you can look through the docs: https://github.com/angular/flex-layout/wiki/API-Documentation
To play around with alignment, you can use the demonstration from Angularjs Material resource (it's totally the same as for Angular Material for Angular 2/4): https://material.angularjs.org/latest/layout/alignment
And another one useful link: https://tburleson-layouts-demos.firebaseapp.com/#/docs
4 Comments
hari
Thank you..can I use angular js layout in angular2??
P.S.
@hari, can't say really, I didn't try to do that. They are totally the same, just some differences in syntax: for example you use
layout-align="center" in Angular Material 1, and the equivalent in Angular Material 2 will be fxLayoutAlign="center". I recommend that you do not reinvent the wheel, just use new syntax, it's pretty easy and they are very similarhari
Ok..Got it..Thank you so much.. @Commercial Suicide
P.S.
@hari, Cheers!!
I created a sample example that should help you understand more how to use the grid by looking at the code for this example. I suggest you try it out and play with the cols numbers, and colspans and rowspans to understand what each of them do. I hope this was helpful!
<mat-grid-list cols = "5" rowHeight = "25vh">
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">1
</mat-grid-tile>
<mat-grid-tile
[colspan] = "3"
[rowspan] = "1">2
</mat-grid-tile>
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">3
</mat-grid-tile>
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">11
</mat-grid-tile>
<mat-grid-tile
[colspan] = "3"
[rowspan] = "1">22
</mat-grid-tile>
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">33
</mat-grid-tile>
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">111
</mat-grid-tile>
<mat-grid-tile
[colspan] = "3"
[rowspan] = "1">222
</mat-grid-tile>
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">333
</mat-grid-tile>
<mat-grid-tile
[colspan] = "5"
[rowspan] = 1> 4444
</mat-grid-tile>
</mat-grid-list>
