CODEWITHSUNDEEP
polymer
Robert Munteanu
Robert Munteanu

Reputation: 68308

Conditionally adding a CSS class to an element with Polymer

I have a Polymer template which creates a list of paper-items. I'd like to decorate some of those with additional CSS classes. What I've done so far is use conditional templates and for each variant, which I find quite ugly ( see below ).

<template is="dom-bind">
    <iron-ajax url="https://example.com/data.json" last-response="{{data}}" auto></iron-ajax>   

    <div role="listbox">
        <template is="dom-repeat" items="[[data.talks]]" as="talk">
            <paper-item>
                <paper-item-body two-line>
                    <template is="dom-if" if="[[shouldHighlight(talk)]]">
                        <div class="highlight"> <!-- content --></div>
                    </template>
                    <template is="dom-if" if="[[!shouldHighlight(talk)]]">
                        <div><!-- content --></div>
                    </template>                     
                </paper-item-body>
            </paper-item>
        </template>
    </div>
</template>

Is there a better way to conditionally add CSS classes using Polymer?

Upvotes: 0

Views: 1623

Answers (1)

&#220;mit
&#220;mit

Reputation: 17489

You can use a computed function/property to do it:

Inside your template:

<div class$="{{_getClassForHighlight(talk)}}"> <!-- content --></div>

Inside your Polymer elment: 

_getClassForHighlight: function(talk) {
    if (this.shouldHighlight(talk)) {
        return "highlight";
    }
    return "";
}

Upvotes: 1

Related Questions