Question

我是角度材料库（和一般的材料设计规范）的新手，我使用了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>

这是基于角度材质示例，我在其中包含了一个有效的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;
}

正如你所看到的，这里明显的错误/问题是填充顶部为50％的.custom-mat-list，这在浏览器之间会有所不同，虽然从技术上说这是有效的，但我认为它不是长期解决方案，如果anuone有任何想法/改进或建议，我将非常感激。

Stackblitz示例：https://stackblitz.com/edit/angular-cccnjp-3dieg1?file=app%2Fsidenav-responsive-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>

它没有这样的工作，对吧？

如果你的目的是使用2维，你可以像这样使用网格：

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

更新

对于带有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

Answer 2

根据hendrathings回答，我想要展示的不是材料设计规范。所以为了做到这一点，我使用了材料+ 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>

Angular材料mat网格列表未展开

2 个答案:

更新