it-swarm.com.ru

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

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

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

14
ethan

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

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

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

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

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

5
Elmer Dantas

Содержимое в 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 )

27
Alexander Taylor

Есть два способа изменить размер компонента 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

22
Amit kumar

В текущей версии 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
Kostas Siabanis

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

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

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

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

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

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

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

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

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

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

0
erickyi2006

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

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