Oh-icon + f7-badge not working

It seems that an oh-icon+f7-badge+Label combination doesn’t work.

                - component: oh-icon
                  config:
                    icon: xxxx
                  slots:
                    default:
                      - component: f7-badge
                        slots:
                          default:
                            - component: Label
                              config:
                                text: 1

It works when I used f7-icon instead of oh-icon

Correct. The oh-icon does not have any accessible slots. Most of the oh- type widgets have reduced functionality with regards to the f7- counterparts for ease of configuration.

Putting additional elements inside the slots of an icon seems a little unusual though (one reason why that functionality was probably not included in the oh-icon to begin with). If you explain a little more what you are trying to achieve, someone here might be able to suggest a more robust solution.

I want to add a badge to an openhab icon (a custom icon)

What version of OH3 are you on?

Currently using core 3.1M2 but I built the openhab-webui about a week ago because I need the grid layout and the oh-clock (as opposed to oh-clock-card) component that was recently merged. Haven’t yet updated to 3.1M3.

OK, a trick - just add the f7-badge component on the same level as the oh-icon and use style left: -somethingpx. Not ideal, because the badge doesn’t respond to action, but I can move on.

@ysc would you consider allowing slots for oh-icon so we can add an icon badge please?

Why not using the already available methods from the docs?

image

- component: oh-link
  config:
    iconF7: ant_fill
    iconSize: 40
    iconBadge: 420

What isn’t possible with this right now is the use of oh-icons as it only supports the f7- & material iconset. You could open an issue for that on github. The forum isn’t the ideal place to submit feature requests or report bugs.

That still doesn’t give him the ability to to use a custom icon does it?

If you upgrade to the 3.1M3, you can take advantage of the awesome new stylesheets feature to get custom icons into the f7-icon
image

component: f7-card
config:
  title: Custom Icon With Stylesheet
  stylesheet: >
    i.icon.customicon {
      background: url("/static/nest-off.png") no-repeat center;
      background-size: cover;
      height: 48px;
      width: 48px;
    }
slots:
  default:
    - component: f7-icon
      config:
        icon: customicon
      slots:
        default:
          - component: f7-badge
            config:
              color: red
              textColor: white
            slots:
              default:
                - component: Label
                  config:
                    text: Badge!
4 Likes

Not in the curent state of that component, no - it’s a bug IMO.

The benefits of the approach with the oh-link component are:

  • less code
  • the whole element is clickable without any extra effort (wrapping both components or sth.)
  • you can use action parameters

So maybe the “best” way currently would be to combine both of these approaches:

uid: icon_badge
component: f7-card
config:
  stylesheet: >
    .customicon {
      background: url("/static/yourImage.png") no-repeat center/contain;
    }
slots:
  default:
    - component: oh-link
      config:
        icon: customicon
        iconSize: 40
        iconBadge: 420

Thx Justin for the clarification

2 Likes

Oh, that’s nice!

The problem with this, basically, is that f7/material icons and OH icons are quite different i.e. to render them the component accepting both will either make a f7-icon or a oh-icon, the latter being basically a plain img (openhab-webui/oh-icon.vue at main · openhab/openhab-webui · GitHub) - and therefore the features around them differ.

This is awesome! Is there an equivalent feature to insert a custom script? That would be super awesome