UI Widget: How to get Icon Color to work

1

I am trying to create a custom widget, but cannot get coloring of an icon based on an item state to work.
YAML extract:

    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    icon-f7: arrow_2_circlepath
                    iconColor: '=(items.acAttic_Mode.state === "AUTO") ? "red" : "grey"'
                    text: Auto

@RGroll @ysc Any clue, why this does not work ??? Hardcoding the color works fine.

Next question, how to get the text below the icon ???

2

Just a typo in the ‘gray’ color value - everything else works fine on my side.
Only ‘gray’ is supported as a color-theme in f7 (see here)

It seems that ‘gray’ is a more common spelling in the US while ‘grey’ is used in other english-speaking countries (in css both values work - not here obviously.) - Grammarly article on that

- component: oh-button
  config:
    icon-f7: arrow_2_circlepath
    iconColor: '=(items.testItem.state === "AUTO") ? "red" : "gray"'
    text: Auto

tl;dr: This isn’t natively supported by the f7-/oh-button component (yet?!).

You could do that with something like this - but it might destroy the layout on mobile devices and you can’t use the button-fill class here, as it has a higher z-index than it’s slot components. There might be a workaround for that with some tinkering.

          - component: f7-col
            config:
              class:
                - button
                - color-gray
              style:
                height: 55px
            slots:
              default:
                - component: oh-button
                  config:
                    action: SOMETHING
                    class:
                      --f7-button-bg-color: transparent
                      --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                    style:
                      position: absolute
                      top: 0
                      left: 0
                      width: 100%
                      height: 100%
                      z-index: 999
                - component: f7-icon
                  config:
                    f7: arrow_2_circlepath
                    color: '=(items.testItem.state === "AUTO") ? "red" : "gray"'
                - component: Label
                  config:
                    text: Auto
                    style:
                      color: black
3

Dumb me :face_with_symbols_over_mouth:
Thanks Rainer !!!
According to second question, I will give it a try…

4

I’m adding a default slot to the oh-button & oh-link so you’ll be able to put anything inside the button:

component: oh-button
config:
  style:
    height: auto # height is fixed with var(--f7-button-height)
slots:
  default:
    - component: f7-icon
      config:
        style:
          display: block
        f7: arrow_2_circlepath
    - component: Label
      config:
        text: Test

For now you can configure the button like this:

config:
  class:
    - margin
    - display-flex
    - flex-direction-column
  style:
    height: auto

The text will be off the icon by 4px and that’s not fixable with this approach currently.

2 Likes
5

Thanks Yannick, excellent as usual !!!

6

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.