代码之家  ›  专栏  ›  技术社区  ›  HDJEMAI

为ngx引导模式指定两个或更多类的方法

  •  0
  • HDJEMAI  · 技术社区  · 4 年前

    我想展示一个以大格式为中心的ngx引导模式。

    这有两类: modal-dialog-centered modal-lg 但我不认为有任何方法可以同时应用这些课程。

    当看着 ngx-bootstrap source code 在这里: modal-options.class.ts

    有一个可选选项 class property 定义为 class?: string; .但它不是我们可以应用的类数组。

    现在,我可以通过以下方式显示以中心为中心的模态:

    this.bsModalRef = this.modalService.show(ConfirmationComponent,
        {class: 'modal-dialog-centered', initialState});
    

    或者一个大模态,但不居中:

    this.bsModalRef = this.modalService.show(ModalConfirmationComponent,
        {class: 'modal-lg', initialState});
    

    我试图将此添加到模态的开始模板中:

    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
        ...
    

    但也没有运气,同学们 莫代尔lg 不想工作

    有人知道如何让它工作吗?

    使现代化

    这个CSS看起来会产生一些结果,但表现并不完全好:

    ::ng-deep .modal.show .modal-dialog {
      -webkit-transform: translate(50%, 50%);
      transform: translate(0%, 50%);
    }
    
    0 回复  |  直到 4 年前
        1
  •  1
  •   HDJEMAI    4 年前

    @MikeOne提供的建议非常有效。

    因此,添加空间分隔类将提供将多个类应用于模式的能力。

    我们可以用以下代码显示完全居中的大模态:

    this.bsModalRef = this.modalService.show(ModalConfirmationComponent,
      {class: 'modal-dialog-centered modal-lg', initialState});
    

    到目前为止,我还没有看到官方文件中记录了这一点。

    推荐文章