OH3 UI: Horizontal line of icons

Add-ons UIs
1

I’d like to create an horizontal line of icons, with some centered text underneath them. I’m using the following code, but it’s not working as I was expecting.

component: f7-block
config:
slots:
  default:
    - component: f7-row
      config: 
      slots:
        default:
          - component: f7-col
            config:
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: power
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "text1"
          - component: f7-col
            config:
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: gauge
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "text2"

The Labelcomponent is not rendering any text. Can any one help?

2

I don’t believe f7-icons have any slots so you can’t put the label component under slots -> default there. But that’s OK, because you don’t want to anyway. You just want the label to be the next item in the column after the icon, so make it part of the column’s array of components:

component: f7-block
config:
slots:
  default:
    - component: f7-row
      config: 
      slots:
        default:
          - component: f7-col
            config:
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: power
                - component: Label
                  config:
                    text: "text1"
          - component: f7-col
            config:
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: gauge
                - component: Label
                  config:
                    text: "text2"