Eckig - Material: Progressbar benutzerdefinierte Farbe?

Ich versuche nun seit Stunden. Ich benutze Material2 und wollen einfach, ändern Sie die Farbe der progress-bar. Ich weiß es gibt diese Themen (primär/Akzent/warn), aber ich möchte eine individuelle Farbe (grün) für meine progressbar.

Ich habe bereits versucht die schrägsten css-Kombinationen.. aber ohne viel Aufwand. Vielleicht hatte jemand das gleiche problem?

Wie über die Einstellung der folgenden Klassen: github.com/angular/material2/blob/master/src/lib/progress-bar/...

InformationsquelleAutor Mka24 | 2018-02-19

Ich vorschlagen kann, ändern Sie die vorgegebenen primär - /warnen/Akzent Farben, um Ihre eigene Farbe.

In Ihrem styles.scss (wenn Ihre Stil-Datei ist die css, die Sie haben zu ändern, um Unterstützung 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

danke, das hat für mich.. ich habe gerade ein neues Thema.scss und enthalten es zu die angular-cli.json, da ich das überschreiben der Farben 🙂 . großen Dank

InformationsquelleAutor TheUnreal

19

Können Sie ::ng-deep - Selektor, um zu erreichen, was Sie wollen, diese Antwort hat einige Informationen über Sie.

Wie ich es gemacht habe:

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>
```
Und das Ergebnis ist dieses:

EDIT:

Ich einen Weg gefunden, Sie zu vermeiden, mit ::ng-deep wie wird es entfernt von eckigen bald.
Es scheint, dass, wenn Sie bewegen Sie Ihren Stil von Ihrem component.css Datei zum globalen styles.css Datei funktioniert es ohne ::ng-deep.

So, einen Stil, der oben definiert sind, können Sie in den
```
mat-progress-bar .mat-progress-bar-buffer {
  background: #E4E8EB;
}
```
Verschieben Sie es an styles.css und es wird angewendet, wie diese:

Dieser arbeitete für mich auf ein neues Projekt. Ich habe nicht geprüft spezifisch mit dem alten code, aber die Bedingungen sind die gleichen, und es gibt keinen Grund dafür, nicht zu arbeiten.
- Dies sollte die Antwort ausgewählt, wie es reagiert direkt und richtig zur Sache, ohne die Notwendigkeit zu ändern, CSS-SCSS und anderen Bullen.
- ng-tief ist veraltet
- Ich weiß, es ist veraltet, aber es gibt keinen anderen Ersatz, das funktioniert jetzt. details.
InformationsquelleAutor Simonca
5

Update:

Vermeiden Sie die Verwendung von tiefen,
TL;DR: Tief ist technisch ungültig (wie deeprecated :p)

Für mehr info siehe: Die Nutzung /Tiefe/und >>> im Winkel 2

Nun, um die Farbe zu ändern mat-Statusanzeige
Hier ist, wie ich es geschafft habe,

Den Kopf über Ihre Stile.scss-Datei (oder die Haupt-css/scss-Datei in Ihrem Projekt)

Fügen Sie diese Klasse -->
```
.green-progress .mat-progress-bar-fill::after {
    background-color: green !important;
}
```
Ihre mat-Fortschritt sollte die Verwendung der oben genannten Klasse, wie -->
```
<mat-progress-bar class="green-progress" mode="indeterminate"></mat-progress-bar>
```
- Ich wollte vermeiden, mit ::ng-tief, aber leider das hat nicht funktioniert für mich. Die Antwort von @Simonca oben (mit ::ng-tief) hat funktioniert.
InformationsquelleAutor Meet Dave

Da keiner der bisher genannten...

Er ist, wie ich es gelöst.

@Meet Dave Recht hat mit seinem Ansatz. Aber Sie sollten encapsulation: ViewEncapsulation.None (deaktiviert css-Module)

Etwas wie dieses:

Komponente

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

Sass (in meinem Fall)

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

Ansicht

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

InformationsquelleAutor Thiago C. S Ventura

2

Für mich, ich brauche nur zu setzen in CSS von dieser Regel:

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

Aber deutlich einfacher ist, wenn man ein theme benutzen.

InformationsquelleAutor Luiz Rossi
1

Winkel 7 und Material 7.1.1
```
 ::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
        stroke: green !important; 
}
```
- Danke, @CinCout
- ng-tief ist veraltet
InformationsquelleAutor Srihari GouthamGr
-2

Können Sie überschreiben Sie nur die Statusleiste backgroud-color mit dieser Methode hinzugefügte benutzerdefinierte Klasse css anzuwenden, die durch Kombination von tag-und Klasse-wie-

<mat-progress-bar class="my-color" mode="determinate" value="40"></mat-progress-bar>

Wechsel in Stil.css

mat-progress-bar.my-color .mat-progress-bar-fill::after { background-color: green; }
- hi, danke für die Antwort.. das funktioniert leider nicht.
- U können versuchen, mit !important sonst machen eine demo url
- das funktioniert nicht, selbst mit !wichtig
InformationsquelleAutor Akshay Garg

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.