Widget development newbie - components to use and style?

Add-ons UIs
1

I’m trying to get my head around the widget development but I must admit it’s a bit overwhelming.

I’m trying to create as a row with three columns with a text to the left, a stepper in the center and a text to the right. First, after looking into lots of code examples I found the component “Label” for presenting a text, but I’m not really sure where this comes from since I find no reference in OH or the F7 framework. Is Label the one, or should I be using some other component for presenting a text like this?

Second question is regarding the F7-stepper. I have tried to find a way to center/align the stepper in the same way as the texts are centered in the columns through text-align. When searching the Framework7 documentation for stepper (here: Stepper Vue Component | Framework7 Vue Documentation) I found nothing about align/justification. I’m not even sure I’m looking in the proper documentation/component reference… :slight_smile:

Skärmavbild 2022-11-16 kl. 14.26.33
Skärmavbild 2022-11-16 kl. 14.26.331410×112 6.26 KB 

    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    style:
                      text-align: center
                    text: Text to the left
          - component: f7-col
            slots:
              default:
                - component: f7-stepper
                  config:
                    item: =props.offset
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    style:
                      text-align: center
                    text: Text to the right
2

There are a few different places for you to look to put all this information together:

  1. The Building Pages docs page will cover some of the basics of the OH yaml system, including, importantly, a very brief intro to styling pages and widgets. This page will also have some links to beginner tutorials on css which is what you are going to use to get your alignment and spacing the way you want it. I find W3Schools to be one of the better general beginner css tutorials, and the Complete Guide to Flexbox the goto place for alignment and spacing (the f7 block, row and col all use flex display by default).
  2. The new Creating Personal Widgets page will go through a little more detail about components (including the Label component) to help you learn how to decide which components are the right choice in various situations.
2 Likes
3

Excellent, thanks!