Question

我正在使用ember-bootstrap模式，其中属性“ size”为“ xl”。 xl采用我自定义的模态尺寸类“ .modal-xl”。但是我还有另一堂课 “ .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

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

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

但是；由于以下原因，它似乎不起作用：传递给classNames的{{1}}没有传递到实际对话框；即bs-modal-simple。请参见bs-modal/dialog的{{3}}。 bs-modal-simple停留在classNames上，传递给bs-modal-simple的实际上是bs-modal/dialog。

请参见size的{{3}}定义；它将bs-modal/dialog传递到相应的sizeClass元素。

如果您检查div的{{3}}；您会看到是否将bs-modal/dialog属性传递给组件；然后将其添加为具有以下定义的类名称：size。这意味着，如果您确实通过了modal-${size}，那么最终您将在下面的size="xl modal-full"元素中同时拥有modal-xl和modal-full。因此，正确的方法似乎令人惊讶地传递了div属性，就像这样。然而;例如，如果您使用size；它不起作用。

TLDR；因为size="modal-full xl"似乎是将自定义类传递到下面的size的唯一属性，所以您需要像div这样传递自己的类。

Answer 2

哦，哇！我猜这很酷。我只需要在attribute-size =“ xl modal-full”中传递我的“ .modal-full”

[x for x in a if x != something]

请随时提出其他建议。

如何在Ember-bootstrap Modal上添加类？

2 个答案: