时间戳

首页 > 解决方案 > 如何使 ngx-bootstrap 模式水平调整大小？

angular - 如何使 ngx-bootstrap 模式水平调整大小？

问题描述

我有一个在 Angular 5 中创建的工作 ngx-bootstrap 模态。我想让用户在模态显示后调整其宽度。是否必须包含任何 CSS 属性。？

config = {
    backdrop: true,
    ignoreBackdropClick: true
  };
  modalRef: BsModalRef;
  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
    
  }
<ng-template #template style="width:35%;margin-left:105px;margin-top:-4px;background-color: #ffffdd">
    <div style="padding-right:-18px">
        <button type="button" style="width:25px" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span style="font-size:2.5rem;margin-left:-1%" aria-hidden="true">&times;</span>
        </button>
    </div>
    <br>
    <div style="text-align: left;padding-left: 5px;background-color: #ffffdd">
       <pre> {{data}}</pre>
    </div>
</ng-template>

<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

希望允许用户拖动并增加 ngx modal 的宽度

标签： angularngx-bootstrap

解决方案

Bootstrap 模态的大小取决于两个类：'modal-lg'用于大型模态和'modal-sm'用于小型模态。

您可以使用[ngClass]以下方式切换这些类：

<div class="modal-dialog" [ngClass]="bigSize ? 'modal-lg' : 'modal-sm'">

并在用户事件上切换bigSize布尔属性，例如单击按钮：

<button (click)="bigSize = !bigSize">Toggle Size</button>

这是您参考的工作示例 StackBlitz。

推荐阅读