OH4: Add colour to a Label Component for specifc letters only

Setup, Configuration and Use Migration
,
1

Hi All.

Once again looking for a pointer to achiev something in a widget.
I have the following configured:

          - component: Label
            config:
              style:
                align-items: center
                color: white
                font-size: 24px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: -1px 1px 1px hsl(0,0%,66%)
                top: 0px
                white-space: nowrap
              text: ="P▲R▲DOX"

Which gives me:
image

I would like to make this look more like:

image

So to make the two triangles red and green respectively?

Not sure how to achieve this?
Thanks
Mark

2

Unfortunately, the only way to achieve this with css is to break of the text into different <span> elements in order to apply the required different styles.

    - component: Label
      config:
        text: P▲R▲DOX
    - component: div
      config: {}
      slots:
        default:
          - component: span
            config:
              content: P
          - component: span
            config:
              content: ▲
              style:
                margin-left: -4.46px
                color: red
          - component: span
            config:
              content: R
              style:
                margin-left: -4.46px
          - component: span
            config:
              content: ▲
              style:
                margin-left: -4.46px
                color: green
          - component: span
            config:
              content: DOX
              style:
                margin-left: -4.46px

Shows you the difference between the two:
image

Note the added margin-left on the spans. This is because the way the html is built there is extra white space on each of the first 4 spans that you need to account for. The other option is just to add spaces between the last three characters to get even (but broader) spacing that way:

- component: div
  config: {}
  slots:
    default:
      - component: span
        config:
          content: P
      - component: span
        config:
          content: ▲
          style:
            color: red
      - component: span
        config:
          content: R
      - component: span
        config:
          content: ▲
          style:
            color: green
      - component: span
        config:
          content: D O X

image

1 Like
3

Thank you. Looks great. Will try them both out.