Components chevron_right Grid List

GitHub

Basic Usage

#1: (3r x 2c)

#2: (1r x 1c)

#3: (1r x 1c)

#4: (2r x 1c)

#5: (2r x 2c)

#6: (2r x 1c)

Template

<PaperContent @class="md-whiteframe-z1 grid-list-demo1">

  <PaperGridList @cols="1 md-2 gt-md-6" @rowHeight="gt-md-1:1 2:2" @gutter="12px gt-sm-8px" as |grid|>

    <grid.tile @class="gray" @rowspan="2" @colspan="sm-1 gt-sm-2" as |tile|>
      <tile.footer>
        <h3>#1: (3r x 2c)</h3>
      </tile.footer>
    </grid.tile>

    <grid.tile @class="green" as |tile|>
      <tile.footer>
        <h3>#2: (1r x 1c)</h3>
      </tile.footer>
    </grid.tile>

    <grid.tile @class="yellow" as |tile|>
      <tile.footer>
        <h3>#3: (1r x 1c)</h3>
      </tile.footer>
    </grid.tile>

    <grid.tile @class="blue" @rowspan="2" as |tile|>
      <tile.footer>
        <h3>#4: (2r x 1c)</h3>
      </tile.footer>
    </grid.tile>

    <grid.tile @class="red" @rowspan="2" @colspan="sm-1 gt-sm-2" as |tile|>
      <tile.footer>
        <h3>#5: (2r x 2c)</h3>
      </tile.footer>
    </grid.tile>

    <grid.tile @class="green" @rowspan="2" as |tile|>
      <tile.footer>
        <h3>#6: (2r x 1c)</h3>
      </tile.footer>
    </grid.tile>

  </PaperGridList>

</PaperContent>

Dynamic Tiles

Svg-1

Svg-2

Svg-3

Svg-4

Svg-5

Svg-6

Svg-7

Svg-8

Svg-9

Svg-10

Svg-11

Template

<PaperContent @class="md-whiteframe-z1 grid-list-demo-dynamicTiles">
  <PaperGridList @cols="sm-2 md-4 gt-md-6" @rowHeight="4:3 gt-md-1:1" @gutter="8px gt-sm-4px" as |grid|>

    {{#each this.tiles as |dynamicTile|}}
      <grid.tile @rowspan={{dynamicTile.span.row}} @colspan={{concat dynamicTile.span.col " xs-1"}} @class={{dynamicTile.background}} as |tile|>
        <md-icon></md-icon>
        <tile.footer>
          <h3>{{dynamicTile.title}}</h3>
        </tile.footer>
      </grid.tile>
    {{/each}}

  </PaperGridList>
</PaperContent>

Responsive and Animated Usage

Template

<PaperContent @class="md-whiteframe-z1 grid-list-demo-responsiveTiles">

  <PaperGridList @cols="3 md-8 gt-md-12" @rowHeight="4:3 gt-md-1:1" @gutter="4px md-8px gt-md-16px" as |grid|>

    {{#each this.colorTiles as |tile|}}

      <grid.tile @colspan={{tile.colspan}} @rowspan={{tile.rowspan}} class={{tile.style}}>
      </grid.tile>

    {{/each}}
  </PaperGridList>
</PaperContent>