关于角度：ng-bootstrap模态尺寸


ng-bootstrap Modal size

设置/覆盖模态的自定义宽度的最佳方法是什么？

似乎ng-bootstrap当前支持

size: 'sm' | 'lg'

但是Bootstrap 4支持sm，md和lg。

理想情况下，我希望模式能够响应并根据容器大小进行调整。 并在手机上全屏显示。

编辑：Bootstrap 4 _variables.scss似乎具有$ modal-md设置，但似乎未使用。

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

我能找到的最干净的解决方案是使用windowClass属性。

即：

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

然后将以下内容添加到您的全局CSS样式中。这很重要，因为样式不会从组件CSS中获取。

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

相关讨论

尝试这样：

1
2
3
4
5
6
7
8
9
10
11
12
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' });
    }

}

我发现这是一个很好的解决方案。

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

可以使用ng-deep" shadow-piercing"后代组合器将样式向下强制通过子组件树进入所有子组件视图。在这种情况下，模态对话类。

1
2
3
4
::ng-deep .my-class .modal-dialog {
     max-width: 80%;
     width: 80%;
}
相关讨论

当您不指定size时，默认值使用$modal-md(500px)。

这三个模态sm，md和lg都具有响应性，并将在移动设备上以全角显示(带有边框)。

如果您确实需要新的尺寸，则可以使用自定义尺寸：

1
this.modalService.open(MyModalComponent, { size: 'xl' });

使用此类的CSS：

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

编辑：xl大小现在是标准大小，因此是CSS。

相关讨论

在style.css文件中添加以下CSS。

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

注意：我们可以用任何名称替换.xlModal。

以新创建的样式打开模式。

1
this.modalService.open(content,{windowClass:"xlModal"});
相关讨论

在接口NgbModalOptions上添加大小xl。

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

现在在打开模态时使用它
this.modalService.open(content, { size: 'xl' });

除了djpalme和Kapil Thakkar答案外，您还需要将组件的"封装"设置为None，如此处所述

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

您可以将其包装成类似

component.ts

1
2
3
4
5
6
7
8
9
10
11
// accepts 'sm', 'md' or 'lg' as argument.
// default argument 'md'
public openModal( dialogSize: 'sm' | 'md' | 'lg' = 'md'): void {
  let modalOptions = {};
  if (dialogSize === 'sm' || dialogSize === 'lg') {
    modalOptions = { size: dialogSize };
  } else {
    modalOptions = { windowClass: 'md-class' };
  }
  this.modalService.open(ConfirmationDialogComponent, modalOptions);
}

component.css

1
2
3
4
::ng-deep .md-class .modal-dialog {
    max-width: 80%;
    width: 80%;
}

并这样称呼它，

1
2
3
4
openModal(); //argument 'md'
openModal('sm'); //argument 'sm'
openModal('md'); //argument 'md'
openModal('lg'); //argument 'lg'