Ng-bootstrap Модальный размер

Каков наилучший способ установки/переопределения пользовательской ширины для модального?

Кажется, ng-bootstrap поддерживает

размер: 'sm' | 'LG'

но Bootstrap 4 поддерживает sm, md и lg.

В идеале я бы хотел, чтобы модальный был отзывчивым и настраивался подобно размерам контейнера. И на мобильных устройствах он будет работать в полноэкранном режиме.

РЕДАКТИРОВАТЬ: Bootstrap 4 _variables.scss, похоже, имеет значение $modal-md, но, похоже, не используется.

$modal-lg:                    800px !default;
$modal-md:                    500px !default;
$modal-sm:                    300px !default;

Ответы

Ответ 1

Самое чистое решение, которое я смог найти, это использовать свойство windowClass.

То есть:

this.modalService.open(MyModalComponent,  { windowClass : "myCustomModalClass"});

Затем добавьте следующее к своим глобальным стилям CSS. Это важно, так как стиль не будет выбран из ваших компонентов CSS.

.myCustomModalClass .modal-dialog {
  max-width: 565px;
}

Ответ 2

Попробуйте вот так:

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ModelComponent } from './model.component';

export class Component {

    constructor(private modalService: NgbModal) {}

    open() {
        const modalRef = this.modalService.open(ModelComponent, { size: 'lg', backdrop: 'static' });
    }

}

Ответ 3

Я нашел это как хорошее решение.

this.modalService.open(MyComponent, { windowClass: 'my-class'});

ng-deep "проколотый тенями" комбинатор потомков может использоваться для принудительного перемещения стиля через дерево дочерних компонентов во все представления дочерних компонентов. В этом случае класс модального диалога.

::ng-deep .my-class .modal-dialog { 
     max-width: 80%;
     width: 80%;
}

Ответ 4

добавьте следующий css в файл style.css.

.xlModal > .modal-dialog {
    max-width: 1490px !important;
    min-width: 971px !important;   
    width: 95% !important;
}

Примечание: мы можем заменить .xlModal на любое имя.

открыть модальный с новым созданным стилем.

this.modalService.open(content,{windowClass:"xlModal"});

Ответ 5

Если вы не укажете size, значением по умолчанию будет $modal-md (500px).

Все 3 мода sm, md и lg являются адаптивными и будут отображаться на полную ширину (с рамками) на мобильном телефоне.

Если вы действительно хотите новый размер, вы можете использовать нестандартный размер:

this.modalService.open(MyModalComponent, { size: <any>'xl' });

С CSS для этого класса:

.modal-xl {
  max-width: 1000px;
}

РЕДАКТИРОВАТЬ: размер XL теперь стандартный размер, поэтому CSS.

Ответ 6

В дополнение к ответам djpalme и Kapil Thakkar вам нужно будет установить для "инкапсуляции" вашего компонента значение None как упомянуто здесь.

@Component({
    selector: 'app-generic-view',
    templateUrl: './generic-view.component.html',
    styleUrls: ['./generic-view.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Ответ 7

Добавьте размер xl на интерфейс NgbModalOptions.

export interface NgbModalOptions {
   size?: 'sm' | 'lg' | 'xl';
}

Теперь используйте его при открытии модального this.modalService.open(content, { size: 'xl' });