angular - 我怎样才能改变 NbDialogService 的大小？

Question

我正在使用星云模板打开一个对话框服务。

我在用着：

this.dialogService.open(FormModalComponent, {
  context: {
    title: title,
  },
});

打开对话框并更改标题的文本。

如何更改对话窗口的大小？

Answer 1

向对话服务添加一个类，例如： 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>

Answer 2

您可以为您的样式添加样式FormModalComponent并通过 CSS 设置它的高度。例如：

:host {
  height: 50vh;
}

Answer 3

我也有同样的情况。你可以这样做：

在您的组件中添加以下内容：

import { ViewEncapsulation } from '@angular/core';

组件装饰器内的以下样式：

encapsulation: ViewEncapsulation.None

this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });

.modal-lg { max-width: 1490px !important; }

Answer 4

您可以为您的 FormModalComponent 添加样式并通过 CSS 设置它的高度。例如：nb-dialog-container{ 宽度：80rem;

   nb-card{
       margin: auto;
       max-height: 90vh;
   } 
}