it-swarm.com.ru

Angular Материал 2: Как оформить плитку md-grid?

 <md-grid-list cols="3" >
  <md-grid-tile style="overflow : scroll;align-items: initial;">

    <app-general style="padding-left : 1em;" ></app-general>

  </md-grid-tile>
  <md-grid-tile class="dummy" style="overflow : scroll;align-items: initial;">
    <app-slab2g style="padding-left : 1em;" > </app-slab2g>

  </md-grid-tile>

  <md-grid-tile style="overflow : scroll;align-items: initial;">
    <app-slab3g style="padding-left : 1em;" > </app-slab3g>


  </md-grid-tile>
</md-grid-list>

Как выровнять элементы внутри md-grid-tile иначе, чем его выравнивание по центру по умолчанию?

6
Aakash Uniyal

Вы можете использовать ::ng-deep для переопределения css по умолчанию md-grid-tile.

cSS:

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

Демо Plunker

6
Nehal

это единственное надежное решение, которое я нашел до сих пор. важно не сработало. :: ng-deep портит основной код. Если вы используете div и используете absolute в css, вы можете выровнять div так, как хотите.

hTML

<mat-grid-tile *ngFor="let project of projects" 
        [style.background]="project.Color" (click)="openDialog(project)" >
        <div fxLayoutWrap fxLayoutAlign="start center" class="footer">

        </div>
</mat-grid-tile>

cSS

.footer {
    position: absolute;
    left: 5px;
    bottom: 5px;
  }
1
Vato

После большого количества крови и слез я смогла оформить первый столбец сетки угловых материалов, не затрагивая другие сетки на странице. Приведенный ниже стиль будет выравнивать по левому краю и центрировать по вертикали Имя человека только в этом <mat-grid-list>.

Угловая материальная сетка:

<mat-grid-list cols="4" rowHeight="4:1">
    <mat-grid-tile colspan="2">
        <div class="leftVerticalAlign">
        Persons Name
        </div>
    </mat-grid-tile>
    <mat-grid-tile>Persons Phone</mat-grid-tile>
    <mat-grid-tile [style.border-left]="'12px solid gray'">Persons Email</mat-grid-tile>
</mat-grid-list>

Неуловимый CSS:

.leftVerticalAlign {
    left: 1em;    
    position: absolute;  
    top: 50%;
    transform: translate(0px, -50%);
    margin: 0;
}

Я добавил дополнительный стиль border-left как еще один способ применения стилей, но он ограничен тем, что он может стилизовать, что я заметил.

Для получения дополнительной информации о выравнивании по горизонтали и вертикали обратитесь к w3schools

Они спасли мне жизнь на этом.

1
goku_da_master

hTML

<mat-grid-tile class="title-tem">
  <div class="item-content">
    hi
  </div>
</mat-grid-tile>

cSS

 .title-tem >::ng-deep .mat-figure{
  align-items: flex-start;
  justify-content: flex-start;
}

это будет работать :)

0
qiwei huang