Dynamic Tiles

Dynamic Tiles.markdown

Dynamic Tiles

A Pen by Vince Noel C. Elizaga on CodePen.

License.

index.html

<div ng-controller="gridListDemoCtrl as vm" flex="" ng-cloak="" class="gridListdemoDynamicTiles" ng-app="MyApp">
  <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px" md-gutter-gt-sm="4px">

    <md-grid-tile ng-repeat="tile in vm.tiles" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1" ng-class="tile.background">
      <md-icon md-svg-icon="{{tile.icon}}"></md-icon>
      <md-grid-tile-footer><h3>{{tile.title}}</h3></md-grid-tile-footer>
    </md-grid-tile>
  </md-grid-list>
</div>

script.js

angular
  .module('MyApp')
  .controller('gridListDemoCtrl', function($scope) {

    this.tiles = buildGridModel({
            icon : "avatar:svg-",
            title: "Svg-",
            background: ""
          });

    function buildGridModel(tileTmpl){
      var it, results = [ ];

      for (var j=0; j<11; j++) {

        it = angular.extend({},tileTmpl);
        it.icon  = it.icon + (j+1);
        it.title = it.title + (j+1);
        it.span  = { row : 1, col : 1 };

        switch(j+1) {
          case 1:
            it.background = "red";
            it.span.row = it.span.col = 2;
            break;

          case 2: it.background = "green";         break;
          case 3: it.background = "darkBlue";      break;
          case 4:
            it.background = "blue";
            it.span.col = 2;
            break;

          case 5:
            it.background = "yellow";
            it.span.row = it.span.col = 2;
            break;

          case 6: it.background = "pink";          break;
          case 7: it.background = "darkBlue";      break;
          case 8: it.background = "purple";        break;
          case 9: it.background = "deepBlue";      break;
          case 10: it.background = "lightPurple";  break;
          case 11: it.background = "yellow";       break;
        }

        results.push(it);
      }
      return results;
    }
  })
  .config( function( $mdIconProvider ){
    $mdIconProvider.iconSet("avatar", 'icons/avatar-icons.svg', 128);
  });

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc2/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

style.css

.gridListdemoDynamicTiles md-icon {
  width: 50%;
  height: 30%; }
.gridListdemoDynamicTiles md-icon svg {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%; }
.gridListdemoDynamicTiles .s64 {
  font-size: 64px; }
.gridListdemoDynamicTiles .s32 {
  font-size: 48px; }
.gridListdemoDynamicTiles md-icon.fa {
  display: block;
  padding-left: 0; }
.gridListdemoDynamicTiles md-icon.s32 span {
  padding-left: 8px; }
.gridListdemoDynamicTiles md-grid-list {
  margin: 8px; }
.gridListdemoDynamicTiles .gray {
  background: #f5f5f5; }
.gridListdemoDynamicTiles .green {
  background: #b9f6ca; }
.gridListdemoDynamicTiles .yellow {
  background: #ffff8d; }
.gridListdemoDynamicTiles .blue {
  background: #84ffff; }
.gridListdemoDynamicTiles .darkBlue {
  background: #80d8ff; }
.gridListdemoDynamicTiles .deepBlue {
  background: #448aff; }
.gridListdemoDynamicTiles .purple {
  background: #b388ff; }
.gridListdemoDynamicTiles .lightPurple {
  background: #8c9eff; }
.gridListdemoDynamicTiles .red {
  background: #ff8a80; }
.gridListdemoDynamicTiles .pink {
  background: #ff80ab; }
.gridListdemoDynamicTiles md-grid-tile {
  transition: all 300ms ease-out 50ms; }
.gridListdemoDynamicTiles md-grid-tile md-icon {
  padding-bottom: 32px; }
.gridListdemoDynamicTiles md-grid-tile md-grid-tile-footer {
  background: rgba(0, 0, 0, 0.68);
  height: 36px; }
.gridListdemoDynamicTiles md-grid-tile-footer figcaption {
  width: 100%; }
.gridListdemoDynamicTiles md-grid-tile-footer figcaption h3 {
  margin: 0;
  font-weight: 700;
  width: 100%;
  text-align: center; }

styles

<link href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc2/angular-material.css" rel="stylesheet" />
<link href="http://localhost:8080/docs.css" rel="stylesheet" />