Custom Button widget - which components to use?

Setup, Configuration and Use Beginners
,
1

Hi,

I am trying to build a custom widget which I want to use on a floorplan.
Currently I am struggling to choose the right components to achieve what I have in my mind.

What I would like to do is to create the following layout:

----------------------------------------------
|                      Temperatur A          |
|  Icon                                      |
|                      Temperatur B          |
----------------------------------------------

So I thought to create the layout based on the following components:

f7-button
 - f7-row
   - f7-col
      - f7-icon
   - f7-col
      -f7-row
         -f7-col
            <how to show text here?>
      -f7-row
         -f7-col
            <how to show text here?>

I was playing around with OH-LABEL-CARD or F7-CARD but was not able to style those elements to the tiny space (about 150x40 px) I have available for the widget.

How would you create such a widget ?

2

That’s a perfectly reasonable structure for the widget (I, personally, might not worry about the final f7-col for each text element, but depending on the styling control you want they might be necessary).

Add text to a custom widget is done with one of two components: