如何在 Angular 2 Material 上的 md-grid-tile 中嵌套 md-card？

Question

我正在按照 https://material.angular.io/components 上给出的示例进行操作，并尝试将 "X" 张卡片放在同一个 "row" 中。为此，我在 md-grid-tile 中嵌套了一个 md-card。

这是我正在做的事情的一个小插曲https://plnkr.co/edit/S8QkPOT8o34jWCO85S8P?p=preview

如果发现 md-grid-tile 有一个 overflow:hidden css 规则，如果我将其更改为 overflow:visible 我可以在 md- 中看到整个 md-card网格瓦片

md-grid-tile {
    display: block;
    position: absolute;
    overflow: visible;
}

这样可以吗？或者如何在同一张 "row" 中排列 X 张卡片？我应该使用其他方法吗？

谢谢。

Answer 1

您不应将 md-card 嵌套在 md-grid-tile 或任何其他内容中。

要实现这样的设计：

您只需将正确的宽度设置为 md-card，默认情况下 md-card 设置为 100%。这是一个 plunker https://plnkr.co/edit/R7mhv59gAG6bZRbEuNKe?p=preview 使用此 css 规则在 "same row" 上看到两个 md-card：

.example-card {
    display: inline-block;
    width: 30%;
    margin: 20px;
    vertical-align: top;
    cursor: pointer;
}

Answer 2

我可以使用 md-grid-tile 中的嵌套 md-card 来实现它。问题是 .mat-figure 的属性 "align-items: center"。这是我的解决方案：

**Component:**

import { Component, OnInit } from '@angular/core';

@Component({
  templateUrl: './abc.component.html',
  styleUrls: ['./abc.component.css']
})
export class AbcComponent implements OnInit {
  ngOnInit() {

  }

  tiles = [
    {text: 'One', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 1, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: 'Five', cols: 1, rows: 1, color: '#DDBDF1'},
    {text: 'Six', cols: 1, rows: 1, color: '#DDBDF1'},
  ];

}

**abc.component.html file content:**

<md-grid-list cols="3">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">

    <md-card class="square_board">HI</md-card>
  </md-grid-tile>
</md-grid-list>

**abc.component.css file content:**

.square_board{
  margin: 10px;
  width: 100%;
}

::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
    align-items: initial;  /*vertical alignment*/
}

结果如下：

这种方法的好处是我们不必关心卡片的间距和位置。

如何在 Angular 2 Material 上的 md-grid-tile 中嵌套 md-card？

How can I nest a md-card within md-grid-tile on Angular 2 Material?

css

angular

material-design

angular-material2