YAML Widget formatting

Setup, Configuration and Use Beginners
1

Hi all,

i have problems to figure out how to properly format my widget…
I tried to create a row with two colums. One column should show the temperature and should be left algigned, the other column in the same row should be right aligned. I think its working so far, even if I#m not sure if i did it the correct way.

But i don’t want line wraps in a f7-col. The Label (Navigation arrow on the right) and also the icon should be in one line and i cannot figure out how to do this. I could use absolute position, but that seems completely wrong to me.

I’m sorry for such a somehow simple question, but i’m really struggling with programming those YAML stuff as it’s quite different from normal css to me.

widget
widget777×188 10.8 KB 

uid: Tuya_Thermostat2
tags: []
props:
  parameters:
    - description: A text prop
      label: headline
      name: headline
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 19, 2022, 11:41:32 AM
component: f7-card
config:
  style:
    --f7-safe-area-right: 0
    --f7-safe-area-left: 0
  action: group
  actionGroupPopupItem: gAquarium
slots:
  content:
    - component: f7-card
      config:
        style:
          width: 100%
      slots:
        default:
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                margin: -4px
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: thermometer
                          style:
                            font-size: 15px
                            margin-left: -2px
                            margin-top: 4px
                      - component: Label
                        config:
                          text: Titel
                          style:
                            font-size: 15px
                            margin-top: 0px
                            left: 0px
                      - component: f7-icon
                        config:
                          f7: battery_100
                          style:
                            margin-top: 4px
                            position: absolute
                            right: 0px
                - component: f7-row
                  config:
                    class:
                      - justify-content
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            text-align: left
                            margin-top: 10px
                        slots:
                          default:
                            - component: Label
                              config:
                                text: 20.00°C
                                style:
                                    font-size: 40px
                                    
                      - component: f7-col
                        config:
                          style:
                            text-align: right
                            margin-top: 10px
                            flex-wrap: nowrap
                            white-space: nowrap
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: location
                            - component: Label
                              config:
                                text: 100%

                
                
                - component: f7-row
                  config:
                    class:
                      - justify-content-left
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: drop
                          style:
                            margin-left: 45px
                            margin-top: 12px
                            font-size: 20px
                      - component: Label
                        config:
                          text: 50%
                          style:
                            font-size: 25px
                - component: oh-trend
                  config:
                    trendItem: ThermostatBuro_ThermostatTemperatur
                    style:
                      --f7-theme-color-bg-color: transparent
                      background: var(--f7-theme-color-bg-color)
                      filter: opacity(30%)
                      position: absolute
                      top: 0
                      height: 100%
                      width: 100%
    - component: f7-row
      config:
        class:
          - justify-content-space-around
          - padding-top
      slots:
        default:
          - component: oh-button
            config:
              action: options
              text: Betriebsart
              iconF7: power
              fill: false
              outline: true
              actionOptions: close=Heizung aus, open=Heizung ein, normal=Auto
          - component: oh-stepper
            config:
              min: 15
              max: 25
              step: 0.5

br

2

You can nest rows and cols as much as you’d like. So, if you want some of the item in a column to be side-by-side,you can wrap those items inside an additional f7-row.

That may be more than you need in this case, however. If I understand your intended final design, I’m not sure you even want to bother with the columns at all. I might try an f7-row with justify-content: space-between containing two other f7-rows with justify-content: flex-start and justify-content: flex-end respectively.

3

thanks a lot it’s working fine :slight_smile:
What is the proper way to use colums then, if i can do everthing in nested rows?

What makes it really hard to understand in general, is that it seems like a mix out of everything to me. classes of CSS for components, some f7 stuff some own open hub components…

Is there any reference which could help me to better understand how YAML and f7 works together?
And is there a recommended way how to write YAML GUIs? I bet that theres something better than the openHab editor…

4

Honestly, in my experience you could do everything with rows because you can override the default flex settings (for that matter you could do nearly everything with just f7-blocks too). But I think that using the alternating rows and cols if you’re actually building a grid of component is just slightly cleaner and easier code to read.

I do all my widget development in the MainUI editor. Nothing else that I’m aware of at the moment is going to give you the autocomplete ([ctrl] + [space]) feature that the editor gives you and it’s the only way to get the immediate preview.

My reference hierarchy is as follows: My first go-to is the autocomplete in the editor itself to see what’s available for a given component. If it’s not immediately clear what a particular property does then I’ll hop over to the the f7 vue docs to get the details. If it’s an oh- component, then it also helps sometimes to have a look at the autogenerated oh component docs but more often, I’ll check out the vue files on the webUI repository itself.

1 Like
5

Ok thanks a lot. I wasn’t aware that there is a autocomplete, i used tab instead of space and somehow it didn’t worked that way, thanks for the hint.