Как добавить класс на Ember-bootstrap Modal?

Question

Я использую модальный ember-bootstrap, в котором атрибут "size" равен "xl". xl берет мой настроенный класс модального размера ".modal-xl". Но у меня есть другой класс ".modal-full", который добавляет больше размера к моему modal-xl. Как я могу добавить этот класс ="modal-full" на мой {{#bs-modal-simple}}

.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

Ух ты!! Это круто, я думаю. Мне просто нужно передать мой ".modal-full в attribute-size = "xl 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 передать свой собственный класс 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 исходный код; вы увидите, что если size свойство передается компоненту; тогда оно будет добавлено как имя класса со следующим определением: modal-${size}, Это означает, что если вы проходите size="xl modal-full" тогда у вас будут оба modal-xl а также modal-full в пределах div элемент под. Таким образом, правильный путь кажется удивительным прохождением size атрибут, как это. Тем не мение; если вы делаете size="modal-full xl" например; она не будет работать.

TLDR; поскольку size кажется, единственное свойство, чтобы передать пользовательский класс в div под вами нужно пройти свой собственный класс, как size=xl your-class-name,