Menu
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.
896
mat-grid-list is a two-dimensional list view that arranges cells into grid-based layout.
You have to set the cols attribute of the mat-grid-list dynamically depending on the screen width. You'd have to decide on which width breakpoint will the mat-grid-list render the 1-column version. Hope this helps!
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
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
