Угловой материал - Мат-Диалог - изменение эффекта размытия фона / затемнения

#css #angular #typescript #sass #angular-material

#css #угловой #машинописный текст #дерзость #угловой материал

Вопрос:

Привет, мое любимое сообщество,

Использование angular с angular material.

При конфигурации по умолчанию, когда вы открываете диалоговое окно с материалом, фон немного затемняется. Теперь я бы хотел, чтобы это был размытый фон. Я попытался поиграть со стилями css, но мне не удалось изменить фон окна (не удалось установить правильный селектор внутри шаблона компонента).

Я просмотрел документацию, но там ничего нет. Я могу еще немного поиграть со стилями, поскольку уверен, что, вероятно, есть какой-то хитрый способ, но, учитывая, что эффект затемнения уже есть из коробки, я бы предположил, что должна быть функция тематизации, доступная также из коробки. Что вы думаете?

Ответ №1:

Я думаю, вы пропустили свойство MatDialogConfig — backdropClass в документах.

Проверьте эту ДЕМОНСТРАЦИЮ StackBlitz для простого примера

Из этой ДЕМОНСТРАЦИИ:

диалоговое окно-обзор-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.log('The dialog was closed');
    this.animal = resu<
  });
}

styles.css:

 .backdropBackground {
  /* your css needs */
}

1. Спасибо @benschabatnoam, это именно то, что я искал. Я не знаю, как я мог пропустить это в документации, это прямо вверху.

2. можем ли мы использовать этот класс для создания размытия фона с использованием непрозрачности

3. @Darshantheerth конечно, вы можете, я обновил образец stackblitz, чтобы показать вам, как использовать правильный css

4. Мне пришлось установить hasBackdrop: true в версии 11

Ответ №2:

Вы можете добиться хорошего эффекта, комбинируя непрозрачность и размытие. Сделайте вот так:

Добавьте backdropClass в свой диалог-параметры:

 backdropClass: "bdrop"

И эти правила для вашей таблицы стилей:

 .bdrop {
    background-color: #bbbbbbf2;
    backdrop-filter: blur(4px);
}

Демо: https://angular-blurred-dialog-backdrop-zdyvpc.stackblitz.io

Ответ №3:

Данный ответ @benshabatnoam абсолютно правильный, но в документации также есть другой вариант полного отключения фона.

hasBackdrop

Вот пример:

https://stackblitz.com/edit/angular-ei9hdv

Ответ №4:

Также вы можете просто переопределить класс .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;
}

Ответ №5:

 const dialogConfig = new MatDialogConfig();**strong text**
dialogConfig.id="dialog"
this.dialog.open(CreatOrderComponent,dialogConfig)

// вы можете присвоить ему идентификатор, а затем использовать этот идентификатор для его оформления