如何在 Ember-bootstrap 模态框上添加 class？

Question

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

上添加 class="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}}

任何人都请帮助我。在此先感谢您。

Answer 1

哦哇！！我想这很酷。我只需要在 attribute-size = "xl modal-full"

中传递我的 ".modal-full

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

如有任何其他建议，请随时提出。

Answer 2

我原以为 classNames 会把你自己的 class 传给 bs-modal。我的意思是;以下应该有效：

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

但是；由于以下原因，它似乎没有工作：传递给 bs-modal-simple 的 classNames 没有传递给实际的对话框；即 bs-modal/dialog。参见 bs-modal-simple 的 template。 classNames 留在 bs-modal-simple 传递给 bs-modal/dialog 的实际上是 size.

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

如果你勾选bs-modal/dialog的source code；你会看到如果将 size 属性传递给组件；然后它将添加为 class 名称，定义如下：modal-${size}。这意味着如果您确实传递了 size="xl modal-full"，那么您最终将在下面的 div 元素中同时拥有 modal-xl 和 modal-full。所以正确的方法似乎令人惊讶地像这样传递 size 属性。然而;例如，如果你做 size="modal-full xl"；它不会起作用。

TLDR；由于 size 似乎是唯一将自定义 class 向下传递到下面的 div 的属性，因此您需要像 size=xl your-class-name 一样传递自己的 class。

如何在 Ember-bootstrap 模态框上添加 class？

How to add a class on Ember-bootstrap Modal?

ember.js

ember-bootstrap