8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

NgbModal 如何使模式从右到左出现,而不是默认的从上到下出现

Amar 2月前

49 0

我正在使用 NgbModal,默认情况下,Modal 在打开时从上到下打开。是否可以让它从右到左显示。我已经设置了定位,以便...

我正在使用 NgbModal,默认情况下 Modal 是从上到下打开的。是否可以让它从右到左显示。我已经设置了定位,使其位于屏幕的右上角。但无法确定打开的方向

我查看了他们的 API,但找不到方向选项。https https://ng-bootstrap.github.io/#/components/modal/examples

这是 stackblitz ,这可能是一个最小可重现的例子

我还发现 这个答案 使用纯引导程序而不是像 ng bootstrap 这样的抽象,所以不确定它如何应用于 NgbModal

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Crossclick')"></button>
  </div>
  <div class="modal-body">Modal Content</div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="modal.close('Save click')">
      Save
    </button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
  Launch demo modal
</button>

<hr />

<pre>{{ closeResult }}</pre>
  open(content: TemplateRef<any>) {
    this.modalService
      .open(content, {
        ariaLabelledBy: 'modal-basic-title',
        animation: true,
      })
      .result.then(
        (result) => {
          this.closeResult = `Closed with: ${result}`;
        },
        (reason) => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

非常感谢帮助

帖子版权声明 1、本帖标题:NgbModal 如何使模式从右到左出现,而不是默认的从上到下出现
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Amar在本站《angular》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 如果您只想要从左到右的几个模式,您可以添加您的 styles.scss (或任何样式\'global\')

    .modal.fade:not(.show) .from-left.modal-dialog {
      transform: translate(-50%,0);
    }
    

    然后,当你打开时传递类 \'form-left\'

    this.modalService
      .open(content, {
        ariaLabelledBy: 'modal-basic-title',
        animation: true,
        modalDialogClass:'from-left' //<--this add the class "from-left"
      }).result(...)
    

    如果都是态,你可以简单地使用

    .modal.fade:not(.show) .modal-dialog {
      transform: translate(-50%,0);
    }
    

    stackblitz ,我在自己的 index.html 中添加了样式

  • 您可以修改下面的 CSS 来实现您想要的任何方向的变换,只需调整 X 和 Y 值即可。

    .modal.fade .modal-dialog {
      transition: transform 0.3s ease-out;
      transform: translate(25px, 0);
    }
    
    .modal.show .modal-dialog {
      transform: none;
    }
    

    Stackblitz 演示

返回
作者最近主题: