A way to add multiple classes on DOM element based on 1 validation in riosJS

Question

Let's say I want to add 2 classes on a DOM element of my choosing based on a boolean variable I've got. With 1 class it would be really simple, just by doing:

<span class="{ class1 : variable }">Text</span>

But what about 2+ classes?

I attempted:

<span class="{ class1, class2 : variable }">Text</span>

<span class="{ ['class1', 'class2'] : variable }">Text</span>

<span class="{ class1 &amp;&amp; class2 : variable }">Text</span>

Is there an actual way or it's impossible right now?

I just want to avoid having to do this:

<span class="{ class1: variable } { class2: variable }">Text</span>

Thanks.

Answer 1

That is possible, yes.

If class1 and class2 are actual CSS classes, this would work:

<div class={"class1 class2": flag}>text</div>

If class1 and class2 are just variables holding CSS class names, I'd use something like this:

<div class={flag ? `${this.class1} ${this.class2}` : ''}>text</div>