Angular - 材质：进度条自定义颜色？

Posted

技术标签:

【中文标题】Angular - 材质：进度条自定义颜色？【英文标题】：Angular - Material: Progressbar custom color? 【发布时间】：2018-07-29 21:49:34 【问题描述】：

我现在尝试了几个小时。我使用 Material2，只是想更改进度条的颜色。我知道有这些主题（主要/重音/警告），但我想为我的进度条设置自定义颜色（绿色）。

我已经尝试过最奇怪的 css 组合.. 但毫不费力。也许有人有同样的问题？

【问题讨论】：

如何设置这些类：github.com/angular/material2/blob/master/src/lib/progress-bar/… 【参考方案1】：

您可以使用::ng-deep 选择器来实现您想要的，this answer 有一些信息。

我是怎么做到的：

CSS

::ng-deep .mat-progress-bar-fill::after 
    background-color: #1E457C;


::ng-deep .mat-progress-bar-buffer 
    background: #E4E8EB;


::ng-deep .mat-progress-bar 
    border-radius: 2px;

html 

<mat-progress-bar  mode="determinate" value="progress"></mat-progress-bar>

结果是这样的：

编辑：

我找到了一种避免使用 ::ng-deep 的方法，因为它很快就会从 Angular 中删除。 似乎如果您将样式从 component.css 文件移动到全局 styles.css 文件，则它可以在没有 ::ng-deep 的情况下工作。

所以，上面定义的样式可以改变

mat-progress-bar .mat-progress-bar-buffer 
  background: #E4E8EB;

将其移至 styles.css，它将像这样应用：

稍后编辑

解释为什么在全局样式表中设置样式有效：

对于组件，默认是 Angular 为每个组件添加一个属性 组件的 DOM 元素，然后将相同的属性添加到每个组件 同一组件的 css 中的类。将样式添加到全局 样式表不添加这些属性，因此样式将是 应用。 （感谢Jompis）

这对我的一个新项目很有用。我没有专门检查旧代码，但条件相同，没有理由不工作。

【讨论】：

这应该是选择的答案，因为它直接正确地响应了手头的问题，无需将 CSS 更改为 SCSS 和其他公牛。 ng-deep 已弃用 我知道它已被弃用，但目前没有其他替代品可以使用。 more details. 详细说明它为什么在全局样式中起作用：这是因为 ViewEncapsulation 的工作原理。对于组件，默认是 Angular 为组件的每个 DOM 元素添加一个属性，然后为同一组件的 css 中的每个类添加相同的属性。将样式添加到全局样式表不会添加这些属性，因此将应用样式。【参考方案2】：

由于到目前为止没有人提及...

他就是我解决它的方法。

@Meet Dave 对他的方法是正确的。但是你应该使用encapsulation: ViewEncapsulation.None（禁用css模块）

类似这样的：

组件

@Component(
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
)

Sass（以我为例）

.audio-progress-bar 
  &.mat-progress-bar 
    height: 10px;
  

  .mat-progress-bar-fill::after 
    background-color: #37474f;
  

  .mat-progress-bar-buffer 
    background-color: #90a4ae;
  

  /* remove animation and the dots*/ 
  .mat-progress-bar-background 
    animation: none;
    background-color: #eceff1;
    fill: #eceff1;

查看

<mat-progress-bar
  class="audio-progress-bar"
  mode="buffer"
></mat-progress-bar>

【讨论】：

ViewEncapsulation.None 在玩火。 嘿@DemPilafian，给我更多细节（我已经有一段时间没有接触 Angular）也许我可以用更多信息更新答案。如果记得很清楚，它周围没有安全风险。【参考方案3】：

更新：

避免使用深度， TL;DR：Deep 在技术上是无效的（例如，deeprecated :p）

更多信息请参考：The use of /deep/ and >>> in Angular 2

现在，要更改垫子进度条的颜色， 这是我的工作方式，

转到您的 styles.scss 文件（或项目中的主 css/scss 文件）

添加这个类 --> 

.green-progress .mat-progress-bar-fill::after 
    background-color: green !important;

你的 mat-progress 应该使用上面的类，比如 --> 

<mat-progress-bar class="green-progress" mode="indeterminate"></mat-progress-bar>

【讨论】：

我想避免使用 ::ng-deep，但不幸的是这对我不起作用。上面@Simonca 的答案（使用 ::ng-deep）确实有效。【参考方案4】：

Angular 8 解决方案：

对我来说，它是将我的样式放在*** .scss 文件中。还得在.scss中选择如下：

html:


<mat-progress-bar [ngClass]="passwordStatusBarColor" 
                  aria-label="Password strength meter"
                  mode="determinate"
                  [value]="progress">
</mat-progress-bar>

<!--passwordStatusBarColor could be 'weak', 'weakest', etc. with a corresponding rule-->

styles.scss：

.weakest 
  .mat-progress-bar-fill::after 
    background-color: yellow;

【讨论】：

【参考方案5】：

我可以建议将其中一种预制的主要/警告/强调颜色更改为您的自定义颜色。

在您的styles.scss 中（如果您的样式文件是css，则必须将其更改为支持scss）：

  @import '~@angular/material/theming';
  // Plus imports for other components in your app.

  // Include the common styles for Angular Material. We include this here so that you only
  // have to load a single css file for Angular Material in your app.
  // Be sure that you only ever include this mixin once!
  @include mat-core();

  // Define the palettes for your theme using the Material Design palettes available in palette.scss
  // (imported above). For each palette, you can optionally specify a default, lighter, and darker
  // hue.

  $mat-blue: (
    50: #e3f2fd,
    100: #bbdefb,
    200: #90caf9,
    300: #64b5f6,
    400: #42a5f5,
    500: #2196f3,
    600: #1e88e5,
    700: #1976d2,
    800: #1565c0,
    900: #0d47a1,
    A100: #82b1ff,
    A200: #448aff,
    A400: #2979ff,
    A700: #2B66C3,
    contrast: (
      50: $black-87-opacity,
      100: $black-87-opacity,
      200: $black-87-opacity,
      300: $black-87-opacity,
      400: $black-87-opacity,
      500: white,
      600: white,
      700: white,
      800: $white-87-opacity,
      900: $white-87-opacity,
      A100: $black-87-opacity,
      A200: white,
      A400: white,
      A700: white,
    )
  );

  $candy-app-primary: mat-palette($mat-blue, A700);
  $candy-app-accent:  mat-palette($mat-orange, A200, A100, A400);

  // The warn palette is optional (defaults to red).
  $candy-app-warn:    mat-palette($mat-red);

  // Create the theme object (a Sass map containing all of the palettes).
  $candy-a-theme($candy-app-theme);
pp-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

  // Include theme styles for core and each component used in your app.
  // Alternatively, you can import and @include the theme mixins for each component
  // that you are using.
  @include angular-material

【讨论】：

谢谢，这对我有用.. 我刚刚制作了一个新的 theme.scss 并将其包含在 angular-cli.json 中，在那里我覆盖了颜色:)。非常感谢【参考方案6】：

对我来说，我只需要在 CSS 中加入这条规则：

div.mat-progress-bar-primary.mat-progress-bar-fill.mat-progress-bar-element::after background-color: green;

但是如果你使用主题显然会更容易。

【讨论】：

【参考方案7】：

Angular 7 和 Material 7.1.1

 ::ng-deep .mat-progress-spinner circle, .mat-spinner circle
        stroke: green !important;

【讨论】：

ng-deep 已弃用【参考方案8】：

您可以在styles.scss 中添加自定义类并将样式添加到相同的类中（使用！important）。

.your-custom-class
  background-color: colorname !important;

或者您可以使用现有的类来覆盖已定义的 css 属性，方法是将它们添加到您的全局 styles.scss 文件中。

.mat-progress-bar-fill::after
  background-color: colorname;

.mat-progress-bar-buffer 
  background: colorname;

【讨论】：

【参考方案9】：

改变组件typeDecorator中的配置：

encapsulation: ViewEncapsulation.None

那么……

.mat-progress-bar-fill::after 
  background-color: $color;

【讨论】：

【参考方案10】：

不使用::ng-deep、ViewEncapsulation 或主题，我们可以通过在style.scss 中放置以下代码，使用干净的scss 自定义进度条：

.mat-progress-bar 
    .mat-progress-bar-fill::after
        background: #007bff;
    
    .mat-progress-bar-buffer
        background: white;
    


.mat-progress-bar[mode=indeterminate] 
    .mat-progress-bar-fill::after
        animation-duration: 1000ms !important;
    
    animation-duration: 1000ms !important;
    .mat-progress-bar-primary
        .mat-progress-bar-fill::after
            animation-duration: 1000ms !important;
        
        animation-duration: 1000ms !important;
    
    .mat-progress-bar-secondary 
        .mat-progress-bar-fill::after
            animation-duration: 1000ms !important;
        
        animation-duration: 1000ms !important;

使用style.scss 中的上述样式模式，我几乎可以自定义进度条的任何方面。我们可以根据我们使用的进度条类型来调整模式。

【讨论】：

【参考方案11】：

你可以通过这个方法只覆盖进度条背景颜色，添加自定义类，然后通过标签和类的组合应用css-

&lt;mat-progress-bar class="my-color" mode="determinate" value="40"&gt;&lt;/mat-progress-bar&gt;

改成style.css

mat-progress-bar.my-color .mat-progress-bar-fill::after background-color: green;

【讨论】：

嗨，谢谢你的回答。不幸的是，这不起作用。 你可以试试!important 否则做一个演示网址 由于 Angular 使用 CSS 封装，这将不起作用

以上是关于Angular - 材质：进度条自定义颜色？的主要内容，如果未能解决你的问题，请参考以下文章

使用 Xamarin Forms 在 UWP 中自定义进度条颜色

Angular 材质自定义组件主题

使用 Angular 材质定义自定义主题时出现 SassError

如何制作WinForm中自定义进度条

在angular 2和bootstrap 4中使用自定义颜色实现进度条

Angular 材质 io 预定义主题颜色