角材料垫网格列表未扩展

Question

我是棱角材料库的新手（通常是材料设计规范），我已经使用引导程序多年了，所以不确定我是否正确实现了mat-grid-list，但是我有以下几点：

<mat-card>
<mat-grid-list cols="2">
    <mat-grid-tile>
        <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
        <mat-list>
            <mat-list-item> 
                <button  mat-raised-button color="warn">
                        {{user.firstName}} {{user.lastName}}
                </button>
            </mat-list-item>
        </mat-list>
    </mat-grid-tile>
    <mat-grid-tile>
        <mat-grid-tile-header>Clocked Out</mat-grid-tile-header>
        <mat-list>
            <mat-list-item> 
                <button mat-raised-button color="accent">
                    {{user.firstName}} {{user.lastName}}
                </button>
            </mat-list-item>
        </mat-list>
    </mat-grid-tile>
</mat-grid-list>

这基于有角度的材料示例，我在其中包括了一个有效的stackblitz示例：https ://stackblitz.com/edit/angular-cccnjp ? file = app%2Fsidenav-sensitive-example.html

如您所见，按钮已呈现在mat-grid-tile-header内部，并且mat-card尚未扩展以容纳所提供的内容（正如我所期望的那样）

编辑：所以，我确实尝试在mat-grid-list上使用rowHeight =“ fit”属性，但这不会呈现任何内容，我希望这会根据内容来扩大mat-grid-list的高度，但是这是行不通的。

https://stackblitz.com/edit/angular-cccnjp-ylmzf9?file=app/sidenav-sensitive-example.html

更新： 丑陋的工作解决方案

所以我设法用一些（非常丑陋的）CSS实现了这一点...

<mat-card class="height100p">
<mat-grid-list cols="2">
    <mat-grid-tile class="mat-grid-tile-custom">
        <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
        <mat-list class="custom-mat-list">
            <mat-list-item> 
                <button  mat-raised-button color="warn">
                        {{user.firstName}} {{user.lastName}}
                </button>
            </mat-list-item>
        </mat-list>
    </mat-grid-tile>
    <mat-grid-tile class="mat-grid-tile-custom">
        <mat-grid-tile-header>Clocked Out</mat-grid-tile-header>
        <mat-list class="custom-mat-list">
            <mat-list-item> 
                <button mat-raised-button color="accent">
                    {{user.firstName}} {{user.lastName}}
                </button>
            </mat-list-item>
        </mat-list>
    </mat-grid-tile>
</mat-grid-list>

.height100p {
    height: 100%;
}
.mat-grid-tile-custom {
    overflow: visible!important;
}

.custom-mat-list { /* this is bad! */
    padding-top: 50%!important;
}

.mat-grid-tile-custom .mat-figure {
    align-items: unset!important;
}

如您所见，这里明显的错误/问题是.custom-mat-list的填充顶部为50％，这在浏览器之间会有所不同，尽管从技术上讲这是可行的，但我认为这不是一个长期解决方案，如果anuone有任何想法/改进或建议，我将不胜感激。

Stackblitz示例：https：//stackblitz.com/edit/angular-cccnjp-3dieg1 ？ file = app％2Fsidenav-sensitive-example.css

Answer 1

mat-grid-list和mat-list布局组件。互相满足不是用来的。您应该选择一个作为布局。

例如，您尝试结合mat-button-toggle和mat-button。像这样：

<mat-button-toggle>Toggle me!
  <button mat-button>Click me!</button>
</mat-button-toggle>

它不是那样工作的，对不对？

如果您打算使用二维，则只能使用网格，如下所示：

<mat-grid-list cols="2"  gutterSize="30px" rowHeight="5:1">
  <mat-grid-tile>
    <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
  </mat-grid-tile>
  <mat-grid-tile >
    <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
  </mat-grid-tile>
  <mat-grid-tile>
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
  <mat-grid-tile >
    <button mat-raised-button color="accent">
          User Text Out
        </button>
  </mat-grid-tile>
</mat-grid-list>

TL; DR;

不要将list view和相结合grid，请选择一个。否则您将违反材料设计规范，请参阅网格文档。

更新

对于带有to listview的循环数据，请使用选项卡布局。查看此示例：

<div class="example-container" [class.example-is-mobile]="mobileQuery.matches" *ngIf="shouldRun">
  <mat-toolbar color="primary" class="example-toolbar">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1 class="example-app-name">Responsive App</h1>
  </mat-toolbar>

  <mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
      <mat-nav-list>
        <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-tab-group>
      <mat-tab label="Clocked In">
        <h1>Clocked In</h1>
        <mat-list *ngFor="let user of usersIn">
          <mat-list-item>
            <button mat-raised-button color="warn">
            {{user}}
        </button>
          </mat-list-item>
        </mat-list>
      </mat-tab>
      <mat-tab label="Clocked Out">
        <h1>Clocked Out</h1>
        <mat-list>
          <mat-list-item *ngFor="let user of usersOut">
            <button mat-raised-button color="warn">
            {{user}}
        </button>
          </mat-list-item>
        </mat-list>
      </mat-tab>
    </mat-tab-group>
  </mat-sidenav-container>
</div>

<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>

链接：

https://stackblitz.com/edit/angular-cccnjp-ufqtvj?file=app/sidenav-sensitive-example.html