Angular2 Материал Диалог css, размер диалогового окна

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

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

Ответ 1

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

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

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

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

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

Ответ 2

Содержимое в md-dialog-content автоматически прокручивается.

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

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

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

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

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

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

Ответ 3

Есть два способа изменить размер компонента MatDialog в угловом материале

.1) Внешний компонент, который вызывает компонент диалога

import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';


dialogRef: MatDialogRef <any> ;

constructor(public dialog: MatDialog) { }

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

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

import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';

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

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

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

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

Ответ 4

В текущей версии Angular Material (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;
}

Готово!

Ответ 5

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

или 2) используйте panelClass и стилизуйте его соответствующим образом.

1) самый простой, но 2) лучше и более настраиваемый.

Ответ 8

Это сработало для меня:

dialogRef.updateSize("300px", "300px");

Ответ 9

Вы также можете позволить угловому материалу самостоятельно определять размер в зависимости от содержимого. Это означает, что вам не нужно создавать облачные файлы TS с размерами, которые зависят от вашего пользовательского интерфейса. Вы можете сохранить их в HTML/CSS.

мой-dialog.html

<div class="myContent">
  <h1 mat-dialog-title fxLayoutAlign="center">Your title</h1>
  <form [formGroup]="myForm" fxLayout="column">
    <div mat-dialog-content>
    </div mat-dialog-content>
  </form>
</div>

мой-dialog.scss

.myContent {
    width: 300px;
    height: 150px;
}

My-component.ts

const myInfo = {};
this.dialog.open(MyDialogComponent, { data: myInfo });