Example of simple responsive layout with Angular Material

Playing with Angular Material lately, and decided to have a look at Responsive Layouts, to have a web page dynamically reorganise itself according to the device viewing it (and its orientation):

So a simple proof-of-concept, here’s some css:

and some html, with the Angular Material attributes:

The layout=”row” gives a side-by-side layout and “column” provides top-down.

In the first <div>, the “hide show-gt-md” causes this tag and it’s contents to only show on devices wider than 960px, whereas the second <div>’s “hide show-sm show-md” means it is only displayed on devices smaller than 960px (literally show-sm means show on devices smaller than 600px wide and show-md less than 960px).

I tried this simple test on a Samsung Galaxy Tab Pro 10.1″ and, as I rotated it’s orientation, it smoothly transitioned between a wide side-by-side layout in landscape and a narrow top-bottom layout in portrait.  Neat.

Leave a Reply

Your email address will not be published. Required fields are marked *