Как разместить модуль Position MatSnackBar в угловом положении?

Question

Я пытаюсь расположить модуль MatSnackbar так, чтобы он отображался вверху моей страницы.

Я пытался использовать config для добавления customclass. Вот мой код:

component.ts

let config = new MatSnackBarConfig();
config.duration = 50000;
config.panelClass = ['red-snackbar']
this.snackBar.open("Please fill all the details before proceeding.", null, config);

< Сильный > .css

.red-snackbar{
    position: absolute !important;
    top: 54px;
}

Но это не работает. Можно ли переместить MatSnackbar?

angular typescript angular-material

12

helloworld 20 Авг 2018 в 22:22

Answer 1

Вы можете определить verticalPosition: MatSnackBarVerticalPosition в соответствии с документами.

Ts:

openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
      // here specify the position
      verticalPosition: 'top'
    });
}

Демо

37

kboul 13 Фев 2019 в 06:19

Answer 2

Для позиционирования закусочной используйте значения положения

            this.snackBar.open(message.text, action, {
                duration: this.timeOut,
                verticalPosition: 'bottom', // 'top' | 'bottom'
                horizontalPosition: 'end', //'start' | 'center' | 'end' | 'left' | 'right'
                panelClass: ['red-snackbar'],
            });

И чтобы изменить цвет, в вашем style.css определите red-snackbar:

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

https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence

5

Igor Simic 10 Янв 2020 в 07:48

Answer 3

Это должно работать:

.mat-snack-bar-container {
 margin-top: 50px !important;
}

0

John Hanna 13 Май 2020 в 07:12

Как разместить модуль Position MatSnackBar в угловом положении?

3 ответа

Похожие вопросы

Новые вопросы

angular