角度材質：嵌套網格

Question

我目前正在使用Bootstrap作為Web應用程序，但想切換到Angular Material。 現在我正在玩網格。

我有三重嵌套網格結構。 我認為孩子們沒有正確顯示，或者至少我沒有將它們編程為正確顯示。 我希望他們不要垂直居中，但我不知道他們為什么會這樣做。

另外，我希望grid-title的標題不會干擾子grid-list （我希望子grid-list在grid-title-header下面開始）。 “最老的”父母的頁腳也是如此。

Angular Material站點具有良好的文檔，但不涉及嵌套網格。

<body ng-app="app">
    <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" class="gridList">
        <md-grid-tile md-rowspan="1" md-colspan="1" md-colspan-sm="1" class="gridTile">
            <md-grid-list flex="" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
                md-row-height-gt-md="1:1" md-row-height="1:1">
                <md-grid-tile md-rowspan="2" md-colspan="1" class="flexTile">
                    <md-grid-tile-header><h4>Sub-cluster Title</h4></md-grid-tile-header>
                    <md-grid-list flex="" md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3"
                        md-row-height="1:1">
                        <md-grid-tile md-colspan="1" md-rowspan="2" class="instanceTile">
                            ID
                        </md-grid-tile>
                    </md-grid-list>
                </md-grid-tile>
            </md-grid-list>
            <md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
        </md-grid-tile>
    </md-grid-list>
  </body>

到目前為止，我非常喜歡Material Design，並且相信它是響應式網頁設計的未來。 我認為越來越多的網站將使用它代替Bootstrap（Bootstrap的JS組件完全依賴於jQuery，除非你使用類似AngularUI的東西），所以我想學習如何正確使用它。

Answer 1

我相信Angular Material網站缺少此布局指令的文檔，但layout-fill正是我所尋找的。

這是一個更新的plnkr 。

只需在嵌套網格列表上定義layout-fill 。

<md-grid-list flex 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" class="gridList" layout="row">
    <md-grid-tile md-colspan="1" md-colspan-sm="1" class="gridTile">
        <md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
          md-rows-md="4" layout-fill>
          <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col" 
            class="flexTile">
            Tile
          </md-grid-tile>
        </md-grid-list>
        <md-grid-tile-footer><h3>Cluster name</h3></md-grid-tile-footer>
    </md-grid-tile>
</md-grid-list>

並放大......

<md-grid-list flex md-cols-md="6" md-row-height-md="1:1" md-gutter="4px"
  md-rows-md="4" layout-fill>
  <md-grid-tile md-colspan="1" md-rowspan="1"  layout="col" 
    class="flexTile">
    Tile
  </md-grid-tile>
</md-grid-list>

此解決方案不包括tile頁眉和頁腳的解決方案，但我想你可以定義某種定位以使其工作。

角度材質：嵌套網格

問題描述

1 個解決方案

解決方案1
3 2015-10-01 16:11:10

角度材質：嵌套網格

問題描述

1 個解決方案

解決方案1 3 2015-10-01 16:11:10

解決方案1
3 2015-10-01 16:11:10