我正在使用星云模板打开一个对话框服务。
我在用着:
this.dialogService.open(FormModalComponent, {
context: {
title: title,
},
});
打开对话框并更改标题的文本。
如何更改对话窗口的大小?
向对话服务添加一个类,例如: dialogClass: 'model-full'
this.dialogService.open(FormModalComponent, {
context: {
title: title,
}, dialogClass: 'model-full'
});
还有一个自定义 CSS,如下所示:
.model-full {
width: 100% !important;
height: 100% !important;
.cdk-visually-hidden {
width: 99% !important;
height: 99% !important;
}
nb-dialog-container {
width: 100% !important;
height: 100% !important;
}
}
还可以在卡片上添加相同的类“model-full”,如下所示。
<div class="card model-full">
<div class="card-header">Some Heading</div>
<div class="card-body">
</div>
<div class="card-footer text-right">
</div>
</div>
您可以为您的样式添加样式FormModalComponent
并通过 CSS 设置它的高度。例如:
:host {
height: 50vh;
}
我也有同样的情况。你可以这样做:
在您的组件中添加以下内容:
import { ViewEncapsulation } from '@angular/core';
组件装饰器内的以下样式:
encapsulation: ViewEncapsulation.None
this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });
.modal-lg { max-width: 1490px !important; }
您可以为您的 FormModalComponent 添加样式并通过 CSS 设置它的高度。例如:nb-dialog-container{ 宽度:80rem;
nb-card{
margin: auto;
max-height: 90vh;
}
}