OH3 Questions about designing an OH button

1

Hallo Community,

in a user widget I added an oh-button at the end and would like to configure it a bit. After several unsuccessful attempts, I am no longer sure whether my ideas are effective.

First the code:

    - component: f7-block
      config:
        class: bog
        style:
          display: flex
          flex-wrap: wrap
          justify-content: space-between
          align-content: space-between
          padding: 20px
          top: 375px
          left: 185px
      slots:
        default:
          - component: f7-segmented
            slots:
              default:
                - component: oh-button
                  config:
                    text: Ausgehend
                    outline: true
                    action: navigate
                    actionPage: page:overview
                    style:
                      width: 200px
                      height: 50px
                - component: oh-button
                  config:
                    text: Eingehend
                    outline: true
                    action: navigate
                    actionPage: page:test
                    style:
                      width: 200px
                      height: 50px

1.) The color is specified by the system, can it be changed?

2.) Which hex or rgba color code is the standard?

3.) Can the specified corner radius be changed?

Many Thanks

2

Yes, there’s several different levels at which you can control the color. If you’re using the built-in editor, you can press ctrl + space to get a context menu of the available configuration options for a widget:
image

Those are just the properties that come as part of the f7 component, but sometimes that won’t be sufficient. In that case you can add whatever css property you want (e.g., color, or background) under the style configuration.

- component: oh-button
  config:
    text: Ausgehend
    outline: true
    action: navigate
    actionPage: page:overview
    style:
      width: 200px
      height: 50px
      background: "#ad09ff"

If you are setting the f7 properties, then those only accept a limited number of text color names as listed here in the f7 docs.

If, however, you are using the css properties directly then any color definition that css accepts will work.

Yes, that’s also a css property; in this case border-radius. So that would also be defined under the style configuration.
https://www.w3schools.com/cssref/css3_pr_border-radius.asp

2 Likes
3

Hello JustinG,

You have an answer to all questions and in my eyes you are a real expert! :+1::+1::+1:

Thank you for the immediate help.

4

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.