[OH3] Basic switch widget

Setup, Configuration and Use Items & Sitemaps
,
1

Hi,

I wanted a smaller than the default switch widget, which aligns better with the default slider widget

image
image693Ă—171 1.67 KB

uid: horizontal_switch
props:
  parameters:
    - label: Title
      name: switchTitle
      required: false
      type: TEXT
    - label: Footer Text
      name: switchFooter
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: switchItem
      required: false
      type: TEXT
timestamp: Jan 6, 2021, 10:49:31 AM
component: f7-card
config:
  title: '=(props.switchTitle) ? props.switchTitle : (props.switchItem) ? props.switchItem : ""'
slots:
  default:
    - component: f7-card-content
      config:
        class:
          - display-flex
          - justify-content-flex-end
      slots:
        default:
          - component: oh-icon
            config:
              icon: '=items[props.switchItem].state == "ON" ? "switch-on" : "switch-off"'
              style:
                position: absolute
                left: calc(1em)
                top: 1em
                width: 30px
          - component: oh-toggle
            config:
              item: =props.switchItem
    - component: f7-card-footer
      config:
        visible: "=(props.switchFooter) ? true : false"
      slots:
        default:
          - component: Label
            config:
              text: '=(props.switchFooter) ? props.switchFooter : ""'

Note there is still an issue with the footer, as it is getting some more white space below the text than I wish for… haven’t found a way to remove that. Maybe @ysc has a hint on that Anyway sharing it so it might be useful for someone else as well. fixed… thanks for the tip @RGroll now it got it to align including the (optional) footer

image
image907Ă—163 5.74 KB

3 Likes
2

Hey @marcel_verpaalen

the reason for the whitespace around the top & bottom is the padding that you`ve assigned to the f7-card. I don’t know exactly what you’re aiming for, but if you only want to remove the padding at the bottom, you could assign

- padding-top
- padding-left
- padding-right

instead of - padding at your f7-card component.

And just FYI - theres no need for these classes at your f7-row:

- display-flex
- flex-direction-row
- justify-content-space-between
- align-items-center
3

Thanks. It was there just due my inexperience with this, copy-pasting from other examples that had those elements in it…