New Stylesheet property

Add-ons UIs
1

I am trying to do the following:

on page level I define stylesheets

  stylesheet: |
    .csslabel {
      font-size: var(--my-font-size);
      font-weight: 500;
      height: var(--my-font-size);
      user-select: none;
      -webkit-user-select: none;}
    .csslabelinactive {
      color: var(--my-font-color);}
    .csslabelactive {
      color: var(--my-font-color-active);}

on widget level THIS is working:

...
class: '=(items[props.item].state == "OFF") ? "csslabelinactive" : "csslabelactive"'
...

but THIS is not working

...
class:
  - csslabel
  - '=(items[props.item].state == "OFF") ? "csslabelinactive" : "csslabelactive"'
...

the resulting code is:

<div class="csslabel =(items[props.item].state == "OFF") ? "csslabelinactive" : "csslabelactive"'></div>

I do probably s.th. wrong with quotes. does anybody have a clue?

2

You are missing a " after OFF.

3

just a copy/paste error in this post. code is correct

4

trying to achieve it this way:

class: '="csslabel " + (items[props.item].state == "OFF") ? "csslabelinactive" : "csslabelactive"'

but don’t know the correct syntax to combine an if/then expression with a string. any idea?

5

Try

class: '="csslabel" + (items[props.item].state === "OFF" ? "\ncsslabelinactive" : "\ncsslabelinactive")'
4 Likes
6

you’re a star! not in a few years I would have come to that solution by myself…
many thanks. that will make things much easier

7

yes he is!!! :+1: