Базовая закусочная из углового материала без кнопки

Итак, у Angular Material есть два основных способа вызова SnackBar. В первом случае вы вызываете базовый SnackBar по умолчанию:

snackbar.open('Message archived', 'Undo', {
  duration: 3000
});

Другой способ - это когда вы вызываете компонент как SnackBar:

snackbar.openFromComponent(MessageArchivedComponent, {
  data: 'some data'
});

Теперь у меня вопрос, как мне вызвать базовый (без использования компонента), но без кнопки 'Undo'. Я могу сделать это:

snackBar.open('Message archived');

Но тогда как мне настроить продолжительность и все другие свойства?

https://material.angular.io/components/snack-bar/overview


angular snackbar angular-material
person Frank    schedule 06.06.2018    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Попробуй это.

snackbar.open('Message archived', '', {
  duration: 3000,
  extraClasses :['test']
});

добавить стили в тестовый класс, чтобы текст был выровнен.

Если extraClasses не работает, используйте вместо него panelClass

CSS-класс.

.test .mat-simple-snackbar{justify-content: center;}
person Supun Dharmarathne    schedule 06.06.2018
comment
Проблема в том, что вы не можете поместить текст в центр, он все еще содержит место для кнопки. Как применить к этому text-align: center? - person Frank; 06.06.2018
comment
Вам нужно использовать panelClass, а не extraClasses. Но теперь это не решает проблемы. Создание .test {text-align: center} не работает, эй - person Frank; 06.06.2018
comment
Итак, мы идем, большое спасибо, чувак! :) Просто измените свои extraClasses на panelClass. extraClasses давно устарели и совсем не работают. По крайней мере, не на stackblitz - person Frank; 06.06.2018

arrow_upward
2
arrow_downward

Обновление 2020

Принятый ответ больше не кажется правильным. Если кто-то наткнется на ту же проблему, вот что сработает для меня:

Создайте закусочную со свойством panelClass как обычно.

// xy.component.ts

this.snackBar.open('Message', '', {
    duration: 3000,
    panelClass: ['simple-snack-bar']
}

Поскольку настраиваемый CSS применяется к контейнеру закусочной панели, вы должны выбрать класс закусочной панели Angular Material, чтобы переопределить стиль.

/* 
styles.css - if you don't want to use ::ng-deep (what is not recomended),
then you are forced to put your styles in the global scope
*/

.simple-snack-bar .mat-simple-snackbar {
  justify-content: center;
}
person jowey    schedule 31.01.2020