web-dev-qa-db-ja.com

Angular-Material：Progressbar custom color？

私は今何時間も試みています。 Material2を使用し、単に進行状況バーの色を変更したいだけです。私はそれらのテーマ（プライマリ/アクセント/警告）があることを知っていますが、プログレスバーにキュートな色（緑色）が欲しいです。

私はすでに最も複雑なCSSの組み合わせを試しました。たぶん誰かが同じ問題を抱えていたのでしょうか？

angularthemesprogress-barbackground-colormaterial
11
Mka24

事前に作成されたプライマリ/警告/アクセントカラーのいずれかをカスタムカラーに変更することをお勧めします。

あなたの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
2
TheUnreal

::ng-deepセレクターを使用して、目的を達成できます。 この回答 にはいくつかの情報があります。

私がやった方法：

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>

結果は次のとおりです。

enter image description here

編集：

angular間もなく削除されるため、::ng-deepを使用しないようにする方法を見つけました。スタイルをcomponent.cssファイルからグローバルに移動するとstyles.cssファイルは::ng-deepなしで動作します。

したがって、上記で定義されたスタイルは、

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

これをstyles.cssに移動すると、次のように適用されます。

enter image description here

これは新しいプロジェクトで私のために働いた。古いコードでは特にチェックしませんでしたが、条件は同じであり、動作しない理由はありません。

24
Simonca

これまで誰も言及していないので...

彼は私がそれを解決した方法です。

@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>
7
Thiago C. S Ventura

更新：

ディープの使用を避けるTL; DR：ディープは技術的に無効です（たとえば、deeprecated：p）

詳細については、以下を参照してください。 = deep /および>>>のAngular 2 の使用

さて、マット進行バーの色を変更するために、ここでそれがどのように機能したのか、

Styles.scssファイル（またはプロジェクトのメインcss/scssファイル）に移動します

このクラスを追加->

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

マットの進行状況では、上記のクラスを使用する必要があります->

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

私にとっては、このルールをCSSに入れるだけです。

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

ただし、テーマを使用すると、明らかに簡単になります。

2
Luiz Rossi

Angular 7およびMaterial 7.1.1

 ::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
        stroke: green !important; 
}
1
Srihari GouthamGr

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