<div class="page page-material">




  <!-- page header -->
  <div class="pageheader">

    <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2>

    <div class="page-bar">

      <ul class="page-breadcrumb">
        <li>
          <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a>
        </li>
        <li>
          <a href="javascript:;">Material UI</a>
        </li>
        <li>
          <a ui-sref="app.material.grid-list">{{page.title}}</a>
        </li>
      </ul>

    </div>

  </div>
  <!-- /page header -->






  <!-- page content -->
  <div class="pagecontent">

    <div flex layout="column">

      <section class="demo-container md-whiteframe-z1">

        <md-toolbar>
          <div class="md-toolbar-tools">
            <md-button class="md-icon-button" aria-label="Settings">
              <md-icon md-font-icon="zmdi zmdi-menu"></md-icon>
            </md-button>
            <h2>
              <span>Basic Usage</span>
            </h2>
            <span flex></span>
            <md-menu md-position-mode="target-right target">
              <md-button aria-label="More" class="md-icon-button" ng-click="$mdOpenMenu()">
                <md-icon md-menu-origin md-font-icon="zmdi zmdi-more-vert"></md-icon>
              </md-button>
              <md-menu-content width="4">
                <md-menu-item ng-repeat="item in [1, 2, 3]">
                  <md-button>
                    Option {{item}}
                  </md-button>
                </md-menu-item>
              </md-menu-content>
            </md-menu>
          </div>
        </md-toolbar>

        <md-content class="md-padding gridListdemoBasicUsage">

          <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="2:2"
            md-gutter="12px" md-gutter-gt-sm="8px" >
            <md-grid-tile class="gray"
                          md-rowspan="3" md-colspan="2" md-colspan-sm="1">
              <md-grid-tile-footer>
                <h3>#1: (3r 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>
            <md-grid-tile class="yellow">
              <md-grid-tile-footer>
                <h3>#3: (1r x 1c)</h3>
              </md-grid-tile-footer>
            </md-grid-tile>
            <md-grid-tile class="blue"
                          md-rowspan="2">
              <md-grid-tile-footer>
                <h3>#4: (2r x 1c)</h3>
              </md-grid-tile-footer>
            </md-grid-tile>
            <md-grid-tile class="red"
                          md-rowspan="2" md-colspan="2" md-colspan-sm="1">
              <md-grid-tile-footer>
                <h3>#5: (2r x 2c)</h3>
              </md-grid-tile-footer>
            </md-grid-tile>
            <md-grid-tile class="green"
                          md-rowspan="2" >
              <md-grid-tile-footer>
                <h3>#6: (2r x 1c)</h3>
              </md-grid-tile-footer>
            </md-grid-tile>
          </md-grid-list>

        </md-content>

      </section>

      <section class="demo-container md-whiteframe-z1">

        <md-toolbar>
          <div class="md-toolbar-tools">
            <md-button class="md-icon-button" aria-label="Settings">
              <md-icon md-font-icon="zmdi zmdi-menu"></md-icon>
            </md-button>
            <h2>
              <span>Dynamic Tiles</span>
            </h2>
            <span flex></span>
            <md-menu md-position-mode="target-right target">
              <md-button aria-label="More" class="md-icon-button" ng-click="$mdOpenMenu()">
                <md-icon md-menu-origin md-font-icon="zmdi zmdi-more-vert"></md-icon>
              </md-button>
              <md-menu-content width="4">
                <md-menu-item ng-repeat="item in [1, 2, 3]">
                  <md-button>
                    Option {{item}}
                  </md-button>
                </md-menu-item>
              </md-menu-content>
            </md-menu>
          </div>
        </md-toolbar>

        <md-content class="md-padding gridListdemoDynamicTiles" ng-controller="gridListDemoCtrl as vm">

          <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>

        </md-content>

      </section>

      <section class="demo-container md-whiteframe-z1">

        <md-toolbar>
          <div class="md-toolbar-tools">
            <md-button class="md-icon-button" aria-label="Settings">
              <md-icon md-font-icon="zmdi zmdi-menu"></md-icon>
            </md-button>
            <h2>
              <span>Responsive Usage</span>
            </h2>
            <span flex></span>
            <md-menu md-position-mode="target-right target">
              <md-button aria-label="More" class="md-icon-button" ng-click="$mdOpenMenu()">
                <md-icon md-menu-origin md-font-icon="zmdi zmdi-more-vert"></md-icon>
              </md-button>
              <md-menu-content width="4">
                <md-menu-item ng-repeat="item in [1, 2, 3]">
                  <md-button>
                    Option {{item}}
                  </md-button>
                </md-menu-item>
              </md-menu-content>
            </md-menu>
          </div>
        </md-toolbar>

        <md-content class="md-padding" ng-controller="gridListResponsiveDemoCtrl as appCtrl" layout-padding>

          <md-grid-list
            md-cols-gt-md="12" md-cols-sm="3" md-cols-md="8"
            md-row-height-gt-md="1:1" md-row-height="4:3"
            md-gutter-gt-md="16px" md-gutter-gt-sm="8px" md-gutter="4px">
          <md-grid-tile
              ng-repeat="tile in appCtrl.colorTiles"
              ng-style="{
                'background': tile.color
              }"
              md-colspan-gt-sm="{{tile.colspan}}"
              md-rowspan-gt-sm="{{tile.rowspan}}">
          </md-grid-tile>
        </md-grid-list>

        </md-content>

      </section>

    </div>


  </div>
  <!-- /page content -->




</div>
