web-dev-qa-db-fra.com

Comment créer un style de casse-croûte au design angulaire

Je suis nouveau sur Angular2/4 et TypeScript angulaire. Je souhaite styler la conception de matériau angulaire snackbar par exemple, changer la couleur de fond du noir et de la couleur de la police pour un autre motif.
Comment puis-je styler le "snackbar"?

J'ai le snackbar de conception matérielle dans le service/noyau et pour le rendre disponible, je l'appelle dans chaque composant selon les besoins.

Comment est-ce que je peux styliser le "snackbar" de conception angulaire à 2 matériaux dans Angular 2/4? J'ai inclus l'extrait de code ci-dessous:

service/core 

>  import { Injectable, Inject }                from '@angular/core';
> import { Observable }                        from 'rxjs/Observable'
> import { DOCUMENT }                          from
> '@angular/platform-browser'; import { MdDialog, MdDialogRef }         
> from '@angular/material'; import { MdDialogConfig, ComponentType }    
> from '@angular/material'; import {MdSnackBar} from
> '@angular/material';
> 
> constructor(
>     public dialog: MdDialog,
>     public snackBar: MdSnackBar,
>     @Inject(DOCUMENT) public doc: any   ) {
>       dialog.afterOpen.subscribe((ref: MdDialogRef<any>) => {
>         if (!doc.body.classList.contains('no-scroll')) {
>         doc.body.classList.add('no-scroll');
>         }
>       });
>       dialog.afterAllClosed.subscribe(() => {
>         doc.body.classList.remove('no-scroll');
>       });        }
> 
>    openSnackBar(message: string, action?: string) {
>     this.snackBar.open(message, action, {
>       duration: 4000,
>     });   }

wiz.components.ts ....

 saveData(): void {
    this.advisorClientModel.currentStep = this.currentStep;
    this.advisorClientModel.clientId = this.faService.getClientId();
    this.advisorClientModel.isMaxAmount = this.isMaximumAmount;
    this.advisorClientModel.desiredLoanAmount = this.loanAmount;
    this.advisorClientModel.maxLoanAmount = this.eligibleSelected.advanceAmount;
    this.advisorClientModel.pledgedAccounts = this.getPledgedAccountsArray();
    this.advisorClientModel.pledgedMarketValue = this.getPledgedMarkeValue();

    this.faService.updateAdvisorClient( this.advisorClientModel )
      .subscribe(
        successModel => {
          this.coreService.openSnackBar("Your Data Has been Saved");
          this.navigateTo("fa/wiz" + (this.currentStep + 1));
        },
        error => {
          this.onError(error);
        }
      );
  }
angularangular-material2
14
user244394

md-snackbar fournit un service permettant de personnaliser config. Une propriété de config est extraClasses qui permet d’ajouter des classes CSS au conteneur snack bar ( doc ).

extraClasses peut être utilisé avec ::ng-deep pour remplacer les classes CSS par défaut. Voici un exemple:

composant.ts:

Requiert import suivant dans le composant:

import {MdSnackBar, MdSnackBarConfig} from '@angular/material';

(fournissant une configuration personnalisée) 

openSnackBar(message: string, action?: string) {
  let config = new MdSnackBarConfig();
  config.extraClasses = ['custom-class'];
  this.snackBar.open(message, action ? 'Action Label' : undefined, config);
}

composant.css:

::ng-deep snack-bar-container.custom-class {
  background: yellow;
}

::ng-deep .custom-class .mat-simple-snackbar {
  color: green;
}

Voici une démo Plunker si vous souhaitez essayer.

NOV 2018 UPDATE: Angular 6+

La syntaxe a un peu changé, le préfixe md- étant remplacé mat- et extraClasses a été remplacé par panelClass. La fonction est globalement la même si:

const config = new MatSnackBarConfig();
config.panelClass = ['custom-class'];
...

et les importations aussi:

import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
36
Nehal

J'ai créé le code suivant pour travailler avec Angular 6 et Angular Material 6.

Le service qui contient le snackBar appelle:

@Injectable()
export class MessageService {
   constructor(private snackBar: MatSnackBar) {}

   showError(message: string) {
      const config = new MatSnackBarConfig();
      config.panelClass = ['background-red'];
      config.duration = 5000;
      this.snackBar.open(message, null, config);
   }
}

Ajoutez la classe css dans le fichier styles.css :

.background-red{
   background-color: rgb(153, 50, 50);
}
6
Ângelo Polotto

De mat SnackBarConfig Class vous pouvez ajouter 

panelClass: string | string[]

"Des classes CSS supplémentaires à ajouter au conteneur de snack-bar".

this.snackBar.open("Your custom Message", '', {
      panelClass:"custom_sneak_bar"
}
3
chhitij srivastava

Angular 5 et supérieur, vous n'avez pas besoin d'utiliser le service de configuration personnalisé, il vous suffit de passer un tableau extraClasses après la durée de la méthode openFromComponent.

Voici comment

app.module.ts :

  import { MatSnackBarModule } from '@angular/material';

Ajouter à importer 

@NgModule({ declarations: [ .. ], imports: [ MatSnackBarModule ]....

composant.ts :

Requiert l'importation suivante dans le composant:

import { MatSnackBar } from '@angular/material';

Exemple de méthode qui appelle SnackBar

openSnackBar(message, type) {
   let extraClasses;
   if (type == 'error') {
     extraClasses = ['background-red'];
   } else {
     extraClasses = ['background-green'];
 }

 this.snackBar.openFromComponent(SnackBarTemplateComponent, {
   duration: 30000,
   extraClasses: extraClasses,
   data: {
     message: message,
     type:type
   }
 });
}

Ajoutez les classes respectives à global style.css Style.css:

.background-red{
  background-color: rgb(153, 50, 50);
}
.background-green{
  background-color: rgb(29, 102, 29);
}
1
SudarP

:: ng-deep le support sera supprimé, comme annoncé à tout moment. Définissez encapsulation: ViewEncapsulation.None sur votre composant de barre de message et vous êtes prêt à partir:

import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material';
import { MessageBarType } from './message-bar.model';

@Component({
  selector: 'app-message-bar',
  templateUrl: 'message-bar.component.html',
  styleUrls: ['message-bar.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MessageBarComponent implements OnInit {

  public MessageBarType: typeof MessageBarType = MessageBarType;

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: { text: String, type: MessageBarType }) { }

  ngOnInit() {
  }
}

Puis dans votre fichier scss :

@import '~@angular/material/theming';
@import '~app/theme-defs';

snack-bar-container {
  &.error {
    background-color: mat-color($warn);
  }

  &.warning {
    background-color: mat-color($dark-warn);
  }

  &.info {
    background-color: mat-color($accent);
  }
}
0
mico.barac

Pour les travaux angulaires 6/7 avec (Dans votre style scss global pour le matériau)

    @import '../node_modules/@angular/material/_theming.scss';
    @include mat-core();

    $background-primary: #232323;
    $background-accent: #353535;
    $background-warn: #c1640c;
    $font-color-default: silver;

    $my-app-primary: mat-palette($mat-light-green, 700);
    $my-app-accent: mat-palette($mat-cyan, 800 );
    $my-app-warn: mat-palette($mat-red, 400);

    $my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn);

    @mixin snack-theme($theme) {
        // Extract whichever individual palettes you need from the theme.
        $primary: map-get($theme, primary);
        $accent: map-get($theme, accent);
        $warn: map-get($theme, warn);


        .mat-snack-bar-container {
            background-color: $background-accent !important;
            color: $font-color-default;
        }
        //Added with panelClass property
        .snack-error {
            button {
                color: mat-color($warn)
            }
        }
        //Added with panelClass property
        .snack-success {
            button {
                color: mat-color($primary)
            }
        }
    }

    @include snack-theme($my-app-theme);

Et appelant snack comme

        this.snackBar.open("your message", 
           "your action",
          {
            duration: 3000,
            panelClass: (isSuccess ? ["snack-success"] : ["snack-error"])
          })
0
Juan Pablo