MatDialog - должен охватывать определенную часть страницы

Question

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

https://stackblitz.com/edit/ngrx-dialog-effects-vj9qek

Answer 1

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

В вашем существующем stackBlitz , измените app.component.ts быть:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';

import * as fromRoot from './reducers/';
import { OpenDialog } from './actions';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styles: [`
    ::ng-deep .cdk-overlay-backdrop { top: 64px; }
`]
})
export class AppComponent {
  animal: Observable<string>;

  constructor(private store: Store<fromRoot.State>) { 
    this.animal = this.store.pipe(select(fromRoot.getAnimalName))
  }

  openDialog() {
    this.store.dispatch(new OpenDialog());   
  }
}