Динамически изменять значения столбцов в угловом материале mat-grid-list - PullRequest
Новая
       11

Динамически изменять значения столбцов в угловом материале mat-grid-list

0 голосов
/ 09 мая 2018

Я использую mat-grid-list: https://material.angular.io/components/grid-list/examples

Так в документации это дается (вы можете сослаться на ссылку ниже):

Добавление плиток, которые занимают несколько строк или столбцов Можно задать диапазон строк и диапазон цветов каждой плитки mat-grid индивидуально, используя свойства rowspan и colspan. Если не установлено, они оба по умолчанию равны 1. Colspan не должно превышать количество столбцов в mat-grid-list. Тем не менее, нет никаких ограничений на диапазон строк, просто будет добавлено больше строк для заполнения плитки.

Но моя проблема в том, что я хочу такую ​​структуру:

будет три строки и в первом ряду 3 столбца, 2-й ряд 4 столбца и 3-й ряд 2 столбца. Как коллаж. количество столбцов в строке будет отправлено динамически.

Есть ли какое-либо решение или альтернативный способ достижения этого? см. это изображение: https://i.stack.imgur.com/AhsrY.png

Ответы [ 2 ]

0 голосов
/ 11 июля 2018

Да, вы можете изменять столбцы и строки динамически для каждой плитки. 

<mat-grid-list cols="{{desired_columns}}" rowHeight="{{desired_rowHeight}}">
    <mat-grid-tile
        *ngFor="let tile of tiles"
        [colspan]="tile.cols"
        [rowspan]="tile.rows"
        [style.background]="tile.color">
       {{tile.text}}
    </mat-grid-tile>
</mat-grid-list>

Это один из способов использования списка, например. tiles, который имеется в вашем классе typescript и задает динамические значения.

Или вы можете создать руководство mat-grid-tile в формате html, но при этом установить разные диапазоны столбцов и строк для каждого tile. 

<mat-grid-tile [colspan]=1 [rowspan]=2>
    content
</mat-grid-tile>
<mat-grid-tile [colspan]=4 [rowspan]=1>
    content
</mat-grid-tile>
<mat-grid-tile [colspan]=3 [rowspan]=2>
    content
</mat-grid-tile>
0 голосов
/ 09 мая 2018

Вы можете попробовать это: angular2 таблица с динамическими строками и столбцами или с использованием нескольких mat-grid-list, предоставляя различные соотношения высоты строк и столбцы для разных строк: 

<mat-grid-list cols="{{your_desired_columns}}" rowHeight="{{your_dynamic_ratio}]">
    <mat-grid-tile>1</mat-grid-tile>
    <mat-grid-tile>2</mat-grid-tile>
    <mat-grid-tile>3</mat-grid-tile>
   ..
    <mat-grid-tile>n</mat-grid-tile>
</mat-grid-list>
...