角材料垫网格列表未扩展答案

【问题标题】：Angular material mat grid list not expanding角材料垫网格列表未扩展
【发布时间】：2018-08-20 09:38:20
【问题描述】：

我是 angular-material 库（以及一般的材料设计规范）的新手，我已经使用 bootstrap 多年，所以不确定我是否正确实施 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>

这是基于 angular-material 示例，我在其中包含了一个工作 stackblitz 示例：https://stackblitz.com/edit/angular-cccnjp?file=app%2Fsidenav-responsive-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-responsive-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 的 padding-top 为 50%，这在浏览器之间会有所不同，虽然从技术上讲这是可行的，但我不认为它是长期解决方案，如果有任何想法/改进或建议，我将不胜感激。

Stackblitz 示例：https://stackblitz.com/edit/angular-cccnjp-3dieg1?file=app%2Fsidenav-responsive-example.css

【问题讨论】：

根据文档，rowHeight-"fit" 仅在网格列表的父容器上设置了高度时才有效，但我尝试了它仍然没有用。您可以尝试将rowHeight 设置为物理值，例如484px 或calc()，但这在实际应用中可能不可行。
是的，我在上面添加了一些代码/css 以使其按我的意愿工作，但它并不漂亮。
这会起作用，而且不会那么“糟糕”： .custom-mat-list { /* 这很糟糕！ */ 位置：绝对；顶部：48px； }

标签： css angular angular-material2

【解决方案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 组合在一起，选择一个。否则您将破坏材料设计规范，请参阅网格Documentation。

更新

对于带有 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-responsive-example.html

【讨论】：

所以这个渲染完美，但是我的内容是动态的，我如何强制动态渲染的内容到某个列？此处显示的示例：stackblitz.com/edit/…
@crooksey，那么你不需要网格。材料不适用于每个拆分 2 列中的 2 个列表。你需要玩标签的东西。如果您确实拆分为 2 列并使用 listview 显示列表，那么您会破坏规则材料设计。 material.io/guidelines/components/grid-lists.html。查看我使用标签的更新。

【解决方案2】：

所以根据 hendrathings 的回答，我想展示的不是材料设计规范。所以为了做到这一点，我在模板中使用了material+flexbox：

<div>
    <div fxLayout="row" fxFlex="50%" fxFlex.gt-sm="50%" >
        <div fxLayout="column" fxFlex  >
            <mat-toolbar color="primary" fxLayoutAlign="center center">
                    <span>Clocked In</span>
            </mat-toolbar>
        </div>
    </div>

    <div fxLayout="row" fxFlex="50%" fxFlex.gt-sm="50%" >
        <div fxLayout="column" fxFlex >
            <mat-toolbar color="primary"fxLayoutAlign="center center" >
                    <span>Clocked Out</span>
            </mat-toolbar>
        </div>
    </div>
</div>


<div *ngIf="clockingStatus">
    <div fxLayout="row" fxFlex="50%" fxFlex.gt-sm="50%" >
        <div fxLayout="column" fxFlex  >
            <mat-list>
                <mat-list-item *ngFor="let user of clockingStatus.clocked_in"
                fxLayoutAlign="center center" > 
                        <button mat-raised-button color="warn">
                                {{user.firstName}} {{user.lastName}}
                        </button>
                </mat-list-item>
            </mat-list> 
        </div>
    </div>

    <div fxLayout="row" fxFlex="50%" fxFlex.gt-sm="50%" >
        <div fxLayout="column" fxFlex>
            <mat-list>
                <mat-list-item *ngFor="let user of clockingStatus.clocked_out"
                fxLayoutAlign="center center" > 
                        <button mat-raised-button color="accent">
                                {{user.firstName}} {{user.lastName}}
                        </button>
                </mat-list-item>
            </mat-list> 
        </div>
    </div>
</div>

【讨论】：