web-dev-qa-db-ja.com

Angular Material 2：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>

Md-grid-tile内のアイテムを、デフォルトの中央揃え以外の方法で整列させる方法は？

htmlcssangularangular-material2
10
Aakash Uniyal

::ng-deepを使用して、md-grid-tileのデフォルトのCSSを上書きできます。

css：

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

Plunkerデモ

9
Nehal

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

それはうまくいくでしょう:)

3
qiwei huang

これは、これまでに見つけた唯一の信頼できるソリューションです。 ！重要な動作しませんでした。 :: ng-deepはメインコードを台無しにします。 divを使用し、cssでabsoluteを使用する場合、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;
  }
2
Vato

多くの血と涙の後、私はangularマテリアルグリッドの最初の列をページ上の他のグリッドに影響を与えることなくスタイルできました。以下のスタイルは、左揃えで個人名を垂直に中央揃えにしますこの <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

彼らはこれで私の命を救った。

2
goku_da_master

プロジェクト全体をいじるのを避けるには、コンポーネントで使用します。

HTML：

<mat-grid-tile [colspan]="8" class="script-menu"> </mat-grid-tile>

CSS：

.script-menu >::ng-deep .mat-figure{
    justify-content: flex-start;
}
2
João Ignacio

:: ng-deep is deprecated 、使用しないでください。
に基づいて Customizing Angular Material component styles 、デフォルトでは、テンプレート内の他のコンポーネントの子である要素に影響するスタイルをオーバーライドすることはできません。
1つのプラクティスは次のとおりです。

.your-component .mat-grid-tile .mat-figure {
  justify-content: flex-start;
}
0
Balloon Wen