1

我正在使用 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}}

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

4

2 回答 2

2

我本来希望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.

于 2018-12-06T21:07:22.970 回答
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}}

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

于 2018-12-06T20:33:36.660 回答