Angular Material - Mat-Dialog - изменение эффекта размытия/затемнения фона
Привет, мое любимое сообщество,
Использование angular с угловым материалом.
С конфигурацией по умолчанию, когда вы открываете диалоговое окно материала, фон немного затемняется. Теперь я хотел бы, чтобы вместо этого был размытый фон. Я пытался поиграть со стилями css, но не смог изменить фон окна (не смог получить правильный селектор внутри шаблона компонента).
Я просмотрел документацию, но там ничего нет. Я могу еще немного поиграть со стилями, так как я уверен, что есть какой-то хитрый способ, но, учитывая, что эффект затемнения уже есть из коробки, я бы предположил, что функция тем также должна быть доступна из коробки. Что ты думаешь?
Ответы 4
Я думаю, вы пропустили свойство MatDialogConfig — фоновый класс в документации.
Check this StackBlitz DEMO for a simple example
Из этой ДЕМО:
диалог-обзор-example.ts:
openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: {name: this.name, animal: this.animal},
backdropClass: 'backdropBackground' // This is the "wanted" line
});
dialogRef.afterClosed().subscribe(result => {
console.info('The dialog was closed');
this.animal = result;
});
}
стили.css:
.backdropBackground {
/* your css needs */
}
мы можем использовать этот класс для размытия фона с помощью непрозрачности
@Darshantheerth уверен, что можете, я обновил образец stackblitz, чтобы показать вам, как использовать правильный CSS
Данный ответ @benshabatnoam абсолютно правильный, но в документации также есть еще одна возможность полностью отключить фон.
Вот пример:
Вы можете добиться хорошего эффекта, комбинируя непрозрачность и размытие. Делайте так:
Добавьте backdropClass к параметрам диалога:
backdropClass: "bdrop"
И эти правила для вашей таблицы стилей:
.bdrop {
background-color: #bbbbbbf2;
backdrop-filter: blur(4px);
}
Демо: https://angular-blurred-dialog-backdrop-zdyvpc.stackblitz.io/
Также вы можете просто переопределить класс .mat-dialog-container {} в своем styles.scss
.mat-dialog-container {
box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
background: #fff;
color: black;
}
Спасибо @benschabatnoam, это именно то, что я искал. Я не знаю, как я мог пропустить это в документации, это прямо вверху.