web-dev-qa-db-fra.com

Angular Matériel 2: Comment styliser une tuile md-grid-tile?

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

Comment aligner des éléments à l'intérieur de la mosaïque md-grid-tile autrement que par son alignement central par défaut 

htmlcssangularangular-material2
6
Aakash Uniyal

Vous pouvez utiliser ::ng-deep pour remplacer le css par défaut de md-grid-tile.

css:

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

Démo Plunker

6
Nehal

c'est la seule solution fiable que j'ai trouvée jusqu'à présent. ! important n'a pas fonctionné. :: ng-deep gâche le code principal. Si vous utilisez div et Absolute en CSS, vous pouvez aligner la div comme vous le souhaitez.

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

Après beaucoup de sang et de larmes, j'ai pu styliser la première colonne d'une grille de matériau angulaire sans affecter les autres grilles de la page. Le style ci-dessous s'alignera à gauche et centrera verticalement le nom de personne uniquement dans ce <mat-grid-list>.

Matière angulaire:

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

Le CSS insaisissable:

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

J'ai ajouté un style border-left supplémentaire à cette application, ce qui représente un autre moyen d'appliquer des styles, mais il est limité à ce que j'ai remarqué.

Pour plus d'informations sur l'alignement horizontal et vertical, consultez w3schools

Ils m'ont sauvé la vie sur celui-ci.

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;
}

ça va être du travail :)

0
qiwei huang