时间戳

首页 > 解决方案 > 如何在 Ember-bootstrap Modal 上添加一个类？

ember.js - 如何在 Ember-bootstrap Modal 上添加一个类？

问题描述

我正在使用 ember-bootstrap 模式，其中属性“size”是“xl”。xl 采用我自定义的模态尺寸类“.modal-xl”。但是我有另一个类“.modal-full”，它为我的 modal-xl 增加了更多的大小。如何在我的 {{#bs-modal-simple}} 上添加此类 =“modal-full”

.modal-xl {
    @media screen and (min-width: $modal-xl) {
        max-width: calc(#{$modal-xl} - 2rem);
    }
}
// add option to bootstrap modal for full-width option
.modal-full {
    @include media-breakpoint-up(xl) {
        max-width: calc(100% - 4rem);
    }
}

模板文件：

{{#bs-modal-simple open=abc size="xl" title="Pricing Details" onHidden=(action (mut abc))}}
<table></table>
{{/bs-modal-simple}}

任何人都请帮我解决这个问题。先感谢您。

标签： ember.jsember-bootstrap

解决方案

我本来希望classNames将您自己的课程传递给bs-modal. 我的意思是; 以下应该有效：

{{#bs-modal-simple open=abc classNames="modal-full" size="xl" title="Pricing Details" onHidden=(action (mut abc))}}

然而; 由于以下原因，它似乎不起作用：classNames传递给bs-modal-simple未传递给实际对话框；那就是bs-modal/dialog。见模板bs-modal-simple。_ classNames留下bs-modal-simple来bs-modal/dialog的其实是size。

见bs-modal/dialog的模板定义；它传递sizeClass给相应的div元素。

如果您检查源代码bs-modal/dialog；你会看到，如果一个属性被传递给组件；然后它将被添加为具有以下定义的类名：. 这意味着如果您确实通过了，那么您最终将同时拥有和在下面的元素内。所以正确的方法似乎令人惊讶地传递了这样的属性。然而; 例如，如果您这样做；不起作用。sizemodal-${size}size="xl modal-full"modal-xlmodal-fulldivsizesize="modal-full xl"

TLDR；因为size似乎是将自定义类向下传递到div下面的唯一属性，所以您需要传递自己的类，例如size=xl your-class-name.

推荐阅读