NgbModal - стиль пользовательского класса

Question

У меня есть приложение 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 DevTools добавлю свойство float: right к контейнеру .modal-dialog, он будет делать то, что я хочу. Но, добавив

.modal-dialog {
  float: right;
}

к моему файлу .scss для компонента не влияет.

Может кто-нибудь показать мне, как переопределить стиль начальной загрузки по умолчанию, чтобы я мог заставить его появляться в правой части экрана и занимать 100% высоты?

Answer 1

Я пытался использовать свойство window.class: 'custom-class', но оно не работало. Я бы добавил объявление пользовательского класса, и модал бы выглядел точно так же.

Решение пришло от https://ng -bootstrap.github.io / # / components / modal / examples который я первоначально смоделировал мой модальный после.

Они ключевой кусок кода здесь, который они не объясняют, зачем он нужен или что он делает, я все еще не совсем уверен, был encapsulation: ViewEncapsulation.None

После добавления этой строки в мое объявление @Component вместе с пользовательским классом все стилирование сработало.

Answer 2

Проблема с решением add encapsulation: ViewEncapsulation.None нарушает весь стиль компонента. Я нашел другое решение из угловой документации: : https://valor -software.com / ngx-bootstrap / # / modals # service-custom-css-class С помощью метода '' open-modal '' 'вы добавляете свой собственный класс, а затем вы можете получить доступ к классу и моделировать модель. например:

modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModalWithClass(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(
      template,
      Object.assign({}, { class: 'pupUp-image-modal'})
    );
  }

Css:

.pupUp-image-modal {
    width: fit-content !important;
    max-width: 95% !important;
    max-height: 95%;
}

Обратите внимание, что стиль модели должен быть помещен в основной файл стиля (style.css) Поскольку модель не является частью текущего компонента

Answer 3

Использование 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;
}