如何在 Angular 2 中完全着色 mat-card-header 背景? [英] How to get mat-card-header background fully colored in Angular 2?

问题描述

我已经在 Angular 2 中制作了一个联系表格.我会制作一个彩色的顶部栏

<md-card-header style="background-color: black; width:100%"></md-card-header><div><md-card-content><form [formGroup]="form" class="form"><div><md-input-container class="full-width"><input mdInput type="text" formControlName="name" placeholder="Votre nom"></md-input-container>

</表单></md-card-content>

</md-card>

这就是我得到的:

我想要类似黄色矩形但使用 md-card-header 的东西:

解决方案

将 padding:0 放在 mat-card 上.并且要更正填充，请在 mat-content 上添加边距.使用特定的类名称来设计卡片样式:

.mat-card-header{背景颜色:红色！重要；填充:5px！重要；}.mat-card{填充:0 ！重要；}.mat-card-content{填充:5px！重要；}

演示<小时>

旧答案:

<小时>

我建议四个选项.

1.使用 ::ng-deep.强>

<块引用>

使用/deep/shadow-piercing后代组合器来强制风格通过子组件树向下进入所有子组件意见./deep/组合器适用于任何深度的嵌套组件，它同时适用于视图的孩子和内容的孩子成分.使用/deep/，>>>和 ::ng-deep 仅用于模拟视图封装.Emulated 是默认的也是最常用的视图封装.为了更多信息，请参阅控制视图封装部分.这不推荐使用阴影穿透后代组合器，支持是从主要浏览器和工具中删除.因此，我们计划放弃支持 Angular(对于/deep/、>>> 和 ::ng-deep 中的所有 3 个).直到那么 ::ng-deep 应该是首选，以获得更广泛的兼容性工具.

CSS:

::ng-deep .mat-card-header{背景颜色:红色！重要；填充:5px！重要；}::ng-deep .mat-card{填充:0 ！重要；}::ng-deep .mat-card-content{填充:5px！重要；}

演示

<小时>

2.使用 ViewEncapsulation

<块引用>

... 组件 CSS 样式被封装到组件的视图中不影响应用程序的其余部分.为了控制这种封装如何在每个组件的基础上发生，您可以在组件元数据中设置视图封装模式.从以下模式中选择:....None 意味着 Angular 没有视图封装.Angular 添加了CSS 到全局样式.范围规则、隔离和前面讨论的保护措施不适用.这本质上是与将组件的样式粘贴到 HTML 中一样.

无值是您从组件设置材料样式所需的值.Angular 材质使用 mat-select-content 作为选择列表的类名.所以可以在组件的选择器上设置:

打字稿:

 import {ViewEncapsulation } from '@angular/core';....@成分({....封装:ViewEncapsulation.None})

CSS

.mat-card-header{背景颜色:红色！重要；填充:5px！重要；}.mat-card{填充:0 ！重要；}.mat-card-content{填充:5px！重要；}

演示

<小时>

3.在 style.css 中设置样式

style.css

.mat-card-header{背景颜色:红色！重要；填充:5px！重要；}.mat-card{填充:0 ！重要；}.mat-card-content{填充:5px！重要；}

演示

<小时>

4.使用内联样式

HTML

<mat-card-header style="background-color:red;padding:5px}"><mat-card-title>标题</mat-card-title><mat-card-subtitle>字幕</mat-card-subtitle></mat-card-header><mat-card-content style="padding:5px !important;">文章主体</mat-card-content></mat-card>

演示

I have made a contact form in Angular 2. I would make a colored top bar

<md-card class="mdcardcontact">
  <md-card-header style="background-color: black;   width:100%">
  </md-card-header>
  <div>
    <md-card-content>
      <form [formGroup]="form" class="form">
        <div>
          <md-input-container class="full-width">
            <input mdInput type="text" formControlName="name" placeholder="Votre nom">
          </md-input-container>

        </div>
       </form>
    </md-card-content>
  </div>
</md-card>

That's what I get :

I would like something like the yellow rectangle but using md-card-header :

解决方案

Put padding:0 on the mat-card. And to correct the padding, add margin on mat-content. Use specific classes names to style he card:

.mat-card-header{
  background-color:red !important;
  padding:5px !important;
}

 .mat-card{
  padding:0 !important;
}

.mat-card-content{
  padding:5px !important;
}

Demo

---

Old Answer:

---

I would suggest four options.

1. Using ::ng-deep.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component. Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section. The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

CSS:

::ng-deep .mat-card-header{
  background-color:red !important;
  padding:5px !important;
}

::ng-deep .mat-card{
  padding:0 !important;
}

::ng-deep .mat-card-content{
  padding:5px !important;
}

DEMO

---

2. Using ViewEncapsulation

... component CSS styles are encapsulated into the component's view and don't affect the rest of the application. To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes: .... None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

None value is what you will need to set material style from your component. Angular material uses mat-select-content as class name for the select list. So can set on the component's selector:

Typscript:

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

CSS

.mat-card-header{
  background-color:red !important;
  padding:5px !important;
}

.mat-card{
  padding:0 !important;
}

.mat-card-content{
  padding:5px !important;
}

DEMO

---

3. Setting styles in style.css

style.css

.mat-card-header{
  background-color:red !important;
  padding:5px !important;
}

.mat-card{
  padding:0 !important;
}

.mat-card-content{
  padding:5px !important;
}

DEMO

---

4. Using inline style

HTML

<mat-card style="padding:0">
    <mat-card-header style="background-color:red;padding:5px}">
        <mat-card-title>Title</mat-card-title>
        <mat-card-subtitle>Subtitle</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content style="padding:5px !important;">
        Body text
    </mat-card-content>
</mat-card>

DEMO

这篇关于如何在 Angular 2 中完全着色 mat-card-header 背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！