Угловая 2/4 Как создать закуску с угловым материалом

Ответ 1

md-snackbar предоставляет сервис для предоставления пользовательских config. Одним из свойств config является extraClasses который позволяет добавлять CSS-классы в контейнер закусочной (doc).

extraClasses можно использовать с ::ng-deep чтобы переопределить классы CSS по умолчанию. Вот пример:

component.ts:

Требуется следующий import в компоненте:

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

(предоставление пользовательской конфигурации)

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

component.css:

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

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

Вот демоверсия Plunker, если вы хотите попробовать.

ОБНОВЛЕНИЕ НОЯБРЯ 2018 Г.: Angular 6+

Синтаксис немного md- префикс mat- заменен на mat- а дополнительные extraClasses заменены на panelClass. Функция в целом такая же:

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

и импорт тоже

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

Ответ 2

Я сделал следующий код для работы с Angular 6 и Angular Material 6.

Сервис, который содержит закусочные звонки:

@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);
   }
}

Добавьте класс css в файл styles.css:

.background-red{
   background-color: rgb(153, 50, 50);
}

Ответ 3

Из SnackBarConfig Class вы можете добавить

panelClass: string | string[]

"Дополнительные классы CSS, которые будут добавлены в контейнер с закусочной".

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

Ответ 4

Угловой 5 и выше вам не нужно использовать настраиваемую конфигурацию, просто передайте массив extraClasses после продолжительности в методе openFromComponent.

Вот как

app.module.ts:

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

Добавить в корзину

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

component.ts:

Требуется следующий импорт в компоненте:

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

Пример метода, который вызывает 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
   }
 });
}

Добавьте соответствующие классы в global style.css style.css:

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

Ответ 5

Для угловых 6/7 работает (в вашем глобальном стиле scss для материала)

    @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);

И зову перекусить как

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

Ответ 6

:: Поддержка ng-deep будет удалена, как было объявлено в ближайшее время. Установите инкапсуляцию: ViewEncapsulation.None на вашем компоненте панели сообщений, и вам хорошо идти:

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() {
  }
}

Затем в вашем файле scss:

@import '[email protected]/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);
  }
}