Angular2 Material Dialog css, размер диалога

Angular2 material team недавно выпустила MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

Я хотел бы изменить внешний вид и почувствовать диалог материала angular2. Например, чтобы изменить фиксированный размер всплывающего контейнера и сделать его прокручиваемым, измените цвет фона и т. д. Как это лучше всего сделать? Есть ли css, с которым я могу играть?

10
angular angular-material angular-material2 css

7 ответов

вы можете проверить элемент диалога с помощью инструментов dev и посмотреть, какие классы применяются в mdDialog.

например, .md-dialog-container является основным классом MDDialog и имеет заполнение: 24px

вы можете создать пользовательский CSS, чтобы перезаписать все, что вы хотите

.md-dialog-container { background-color: #000; width: 250px; height: 250px }

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

3

контент md-dialog-content автоматически прокручивать.

вы можете вручную установить размер в вызове MdDialog.open

let dialogRef = dialog.open(MyComponent, {
  height: '400px',
  width: '600px',
});

дополнительная документация / примеры для прокрутки и калибровки: https://material.angular.io/components/dialog/overview

некоторые цвета должны определяться вашей темой. См. здесь для theming docs: https://material.angular.io/guide/theming

если вы хотите изменить цвета и такие, используйте технику Элмера, просто добавив соответствующий css.

обратите внимание, что вы должны иметь HTML 5 <!DOCTYPE html> на Вашей странице для размера вашего диалога, чтобы соответствовать содержимому правильно ( https://github.com/angular/material2/issues/2351)

22

есть два способа, которые мы можем использовать для изменения размера вашего компонента MdDialog в угловом материале

1) Из Внешнего Компонента, Который Вызывает Компонент Диалога

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';


dialogRef: MdDialogRef <any> ;

constructor(public dialog: MdDialog) { }

openDialog() {
        this.dialogRef = this.dialog.open(TestTemplateComponent, {
            height: '40%',
            width: '60%'
        });
        this.dialogRef.afterClosed().subscribe(result => {
            this.dialogRef = null;
        });
    }

2) Изнутри Диалогового Компонента. динамически изменять его размер

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';

constructor(public dialogRef: MdDialogRef<any>) { }

 ngOnInit() {
        this.dialogRef.updateSize('80%', '80%');
    }

используйте updateSize () в любой функции диалогового компонента. он автоматически изменит размер диалогового окна.

для получения дополнительной информации, проверьте эту ссылку https://material.angular.io/components/component/dialog

18

Я думаю, вам нужно использовать /deep/, потому что ваш CSS может не видеть ваш модальный класс. Например, если вы хотите настроить .modal-dialog

/deep/.modal-dialog {
  width: 75% !important;
}

но этот код изменит все ваши модальные окна, лучшим решением будет 

:host {
  /deep/.modal-dialog {
  width: 75% !important;
  }
}
3

для последней версии Angular с этого поста, кажется, вы должны сначала создать объект MatDialogConfig и передать его в качестве второго параметра в dialog.open (), поскольку Typescript ожидает, что второй параметр будет иметь тип MatDialogConfig.

const matDialogConfig = new MatDialogConfig();
matDialogConfig.width = "600px";
matDialogConfig.height = "480px";
this.dialog.open(MyDialogComponent, matDialogConfig);
2

совместное использование последней на mat-диалог два способа достичь этого... 1) либо вы устанавливаете ширину и высоту во время открытия например,

    let dialogRef = dialog.open(NwasNtdSelectorComponent, {
        data: {
            title: "NWAS NTD"
        },
        width: '600px',
        height: '600px',
        panelClass: 'epsSelectorPanel'
    });

или 2) Используйте panelClass и стиль его соответственно.

1) проще всего, но 2) лучше и более настраивается.

0

С текущей версией углового материала (6.4.7) вы можете использовать пользовательский класс:

let dialogRef = dialog.open(UserProfileComponent, {
  panelClass: 'my-class'
});

Теперь поместите свой класс где-нибудь в глобальном масштабе (не смогли сделать эту работу в другом месте), например, в styles.css:

.my-class .mat-dialog-container{
  height: 400px;
  width: 600px;
  border-radius: 10px;
  background: lightcyan;
  color: #039be5;
}

готово!

0