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

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

0 голосов
/ 06 декабря 2018

Я использую модал 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}}

Кто-нибудь, пожалуйста, помогите мне с этим.Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Я бы ожидал, что 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 s template definition;он передает sizeClass соответствующему элементу div.

Если вы проверяете bs-modal/dialog s исходный код ;вы увидите, что если свойство 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.

0 голосов
/ 06 декабря 2018

Ого !!Это круто, я думаю.Я просто должен передать свой ".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}}

Пожалуйста, не стесняйтесь давать любые другие предложения.

...