Question

如何传递动态CSS属性

{{test-component  height=height}}

test-component.hbs

<div class="flip-container ">
    <div class="flipper">
        <div class="front">
            RED SIDE
        </div>
        <div class="back">
            BLUE SIDE
        </div>
    </div>
</div>

假设我想修改此CSS属性

.flip-container, .front, .back {
    width: 10em;
    height: 20em;
}

我见过bind-attr帮助器，但现在已经弃用了。

Answer 1

您可以直接将class属性传递给组件。

{{test-component  height=height myclass=myclass }}

测试component.hbs

<div class={{myclass}}>
    <div class="flipper">
        <div class="front">
            RED SIDE
        </div>
        <div class="back">
            BLUE SIDE
        </div>
    </div>
</div>

结帐twiddle。

Answer 2

我想您想根据height属性更改内联css。如果是这样，那就有办法：

您可以将动态值传递给元素的样式属性在模板中：<div style="height: {{height}}px;"></div>你可以在this ember-twiddle中找到一个有效的例子。
您可以观察组件中height的更改并更改CSSOM 相应地：this.get('element').style.height = '10px';

有一些论据应该首选。有人认为模板绑定更容易阅读，感觉更像是烬。另一方面，它需要style-src: unsafe-inline内容安全策略（CSP），而修改CSSOM则不需要。{/ p>

当然，如果可能的话，你应该总是使用css类。

ember组件中的动态CSS？

2 个答案: