Dynamic CSS in ember component?

Question

How to pass dynamic CSS property

{{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>

Suppose I want to modify this CSS property

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

I have seen bind-attr helper , but now it's deprecated.

Ahmet Emre Kilinc · Accepted Answer · 2017-10-09 05:16:24Z

1

You can directly pass class attribute to the component.

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

test-component.hbs

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

Checkout this twiddle.

edited Oct 9, 2017 at 5:16

answered Oct 8, 2017 at 15:02

Ahmet Emre Kilinc

7,05119 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vignesh Raja · Accepted Answer · 2018-08-20 13:00:51Z

0

I suppose you want to change inline css according to height property. If so there are to approaches:

You could pass dynamic values to style attribute of an element in template: <div style="height: {{height}}px;"></div> You could find a working example in this ember-twiddle.
You could observe changes to height in your component and change CSSOM accordingly: this.get('element').style.height = '10px';

There was some arguments which one should be preferred. Some argues that template binding is easier to read and feels more like the ember-way. On the other hand it requires a style-src: unsafe-inline Content-Security-Policy (CSP) which modifying CSSOM does not.

Of course if possible you should always use css classes.

edited Aug 20, 2018 at 13:00

Vignesh Raja

8,9112 gold badges38 silver badges46 bronze badges

answered Nov 2, 2017 at 23:28

jelhan

6,3582 gold badges23 silver badges37 bronze badges

Collectives™ on Stack Overflow

Dynamic CSS in ember component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related