Building Pages in the OH3 UI: documentation draft (2/3)

You’re trying to display an image inside the oh-button component I suppose. oh-button (and the f7-component it’s based on) doesn’t support slots - so this will not work.

Generally the oh-button component only supports icons from the f7- and the material-iconset, which I attached an example below.

For explanation to the oh-image component you’re trying to use - the ‘/static/’ path corresponds with the ‘/etc/openhab/html/’ folder of your installation. And you don’t need the equal sign in that case, because you’re not accessing a prop, item or variable. So this would work, if you place an image in the above mentioned path:

- component: oh-image
  config:
    url: "/static/a1.png"

To reach your initial goal, you have to use a small workaround. (see the third button example in the code below) Be aware that there is a slight distinction with this workaround in the ‘hover’ and ‘pressed’-state of the button.

You also can leave your icon inside the ‘/etc/openhab/icons/classic/’ folder then, as ‘oh-icon’ is looking for icons there and in the integrated OH-iconset.

- component: oh-button
  config:
    action: popup
    actionModal: widget:YOURWIDGET
    class:
      - margin-right
    text: F7-icon
    icon-f7: plus_circle
    iconSize: 25
    iconColor: white
    raised: true
    large: true
    fill: true

- component: oh-button
  config:
    action: popup
    actionModal: widget:YOURWIDGET
    class:
      - margin-right
    text: Material-icon
    icon-material: add_circle
    iconSize: 25
    iconColor: white
    raised: true
    large: true
    fill: true

- component: f7-row
  config:
    class:
      - button
      - button-fill
      - button-large
      - button-raised
      - align-items-center
  slots:
    default:
      - component: oh-button
        config:
          action: popup
          actionModal: widget:YOURWIDGET
          style:
            --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)
            position: absolute
            top: 0
            left: 0
            height: 100%
            width: 100%
      - component: oh-icon
        config:
          icon: a1
          style:
            height: 25px
      - component: Label
        config:
          text: OH-icon

Hope it helps!

4 Likes