CODEWITHSUNDEEP
angularjsangular-material
mindparse
mindparse

Reputation: 7225

md-grid-list: re-ordering of items

I am using Angular Material and have been looking at the md-grid-list lately for a design requirement I am trying to solve.

I have a bunch of div's that are children to a container with layout row applied. Each of the child items have set widths\heights and have a toggle button to expand\collapse, which just doubles their sizes on expand and then return to original sizes on collapse.

What I'd like is for the child items to re-order to fill available space (provided that space is big enough) around other items that have been expanded.

enter image description here

Right now the container element for my child items also has layout-wrap applied and so of course as items gets expanded, any children that don't fit horizontally just push down below the previous item.

I have come across md-grid-list but I am not so sure this will provide me with what I am after, as it seems to be more suited for percentage based sizes - or have I got that wrong?

I have seen http://masonry.desandro.com/ where if you resize the window on the homepage, that's the kind of behaviour I am looking for, although I would not want the height\widths to update dynamically.

Can this behaviour be achieved using Angular Material components alone?

Upvotes: 2

Views: 1394

Answers (1)

kuhnroyal
kuhnroyal

Reputation: 7553

I am not sure if I understand you correctly but that is exactly what the grid does?

You just set the column count and width/height ratio. You can also set the height of the rows in pixels. And you can configure it depending on CSS breakpoints.

<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="4"
    md-row-height-gt-md="{{height ? '100px' : '1:1'}}" md-row-height="100px"
    md-gutter="12px" md-gutter-gt-sm="8px">

    <md-grid-tile class="gray" md-rowspan="2" md-colspan="2" md-colspan-sm="1">
      <md-grid-tile-footer>
        <h3>#1: (2r x 2c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

    <md-grid-tile class="green">
      <md-grid-tile-footer>
        <h3>#2: (1r x 1c)</h3>
      </md-grid-tile-footer>
    </md-grid-tile>

As you can see I added a toggle to switch height between ratio and fixed heigth: md-row-height-gt-md="{{height ? '100px' : '1:1'}}". Everything is animated by default but you can roll your own animations with angular-animate.

http://codepen.io/kuhnroyal/pen/QyxOQo

Upvotes: 1

Related Questions