Как я могу вложить md-карту в md-grid-tile на Angular 2 Material?

Question

Я следую примерам, приведенным на https://material.angular.io/components, и пытаюсь поместить «X» количество карточек в одну и ту же «строку». Для этого я вложил md-карту в md-grid-tile.

Вот plunker того, что я делаю https://plnkr.co/edit/S8QkPOT8o34jWCO85S8P?p=preview

Если выяснил, что мкр-сеточная плитка имеет переполнение: скрытое правило CSS, если я могу изменить его переполнение: видимый я могу видеть всю мкр -card внутри md-grid-tile

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

Это нормально? Или как я могу разместить X число карточек в одной и той же строке? Должен ли я использовать другой подход?

Спасибо.

Answer 1

Вы не должны вставлять md-карту внутри md-grid-плитки или любого другого.

Для достижения DESING вроде этого:

Вы просто должны установить правильную ширину для мда-карты по умолчанию мда-карта устанавливаются на 100%. Вот plunker https://plnkr.co/edit/R7mhv59gAG6bZRbEuNKe?p=preview увидеть два MD-карты на «той же строке» с помощью этого правила CSS:

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

Answer 2

Я в состоянии достичь его с помощью вложенного мД-карту в мкр-грид-плитка. Проблема заключалась в том, что свойство «align-items: center» .mat-figure. Вот мое решение:

**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*/ 
} 

Вот результат:

benifit этого подхода заключается в том, что мы не должны заботиться о расстояния и размещения карт.