时间戳

首页 > 解决方案 > NgbModal - 自定义类样式

angular - NgbModal - 自定义类样式

问题描述

我有一个 Angular 6 应用程序，我正在尝试实现一个从屏幕右侧滑入的模式窗口，如下所示：https ://codepen.io/anon/pen/OayRVy

但是，无论我尝试什么，我都无法覆盖模态窗口的定位。我唯一能改变的是标题/正文的背景颜色。

我的模态 HTML：

<ng-template #content let-modal="close">

      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Table of Contents</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="dismissModal(modal)"><span aria-hidden="true">&times;</span></button>
      </div>

      <div class="modal-body">
        <p>
          ....
        </p>
      </div>

</ng-template>

组件代码：

  import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

  constructor(private modalService: NgbModal) {}

  public open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'lg'}).result.then((result) => {
      ...
    }, (reason) => {
      ...
    });
  }

如果我检查 HTML 并在 Chrome DevToolsfloat: right中向容器添加一个属性.modal-dialog，它将执行我想要的操作。但是，添加一个

.modal-dialog {
  float: right;
}

对组件的 .scss 文件无效。

谁能告诉我如何覆盖默认的引导样式，以便我可以强制它出现在屏幕的右侧并占据 100% 的高度？

标签： angulartypescriptbootstrap-modalng-bootstrap

解决方案

使用windowClass自NgbModalOptions

    this.modalService.open(
        content, 
        {
            ariaLabelledBy: 'modal-basic-title', 
            size: 'lg', 
            windowClass: 'custom-class'
        }
    )
    .result
    .then((result) => {
        // write your code here
    });

在scss中：

.custom-class {
    float: right;
}

推荐阅读