Custom Widget - is it possible to put toggle into header?

wzbfyb · January 22, 2021, 11:13am

Hi,

is it possible to put controls like an oh-toggle into the header of a widget?

currently it looks like this:

but id like to move the toggle into the header, to save space and make it look cleaner. is this possible? thats my code so far:

uid: raumLicht
tags: []
props:
  parameters:
    - description: Raum Name
      label: Raum Name
      name: raumName
      required: false
      type: TEXT
    - description: Raum der zu steuern ist
      label: Raum Gruppe
      name: raumGruppe
      required: false
      type: TEXT
    - description: Raum Booster der zu steuern ist
      label: Raum Boost Item
      name: raumBoost
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 22, 2021, 12:01:14 PM
component: f7-card
config:
  title: '=(props.raumName) ? "Licht " + props.raumName : "Set props to test!"'
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config: 
              class:
                - margin
            slots:
              default:
                - component: Label
                  config:
                  text: Licht
                - component: oh-toggle
                  config:
                    item: =props.raumGruppe
          - component: f7-block
            config:
              class:
                - segmented
            slots:
              default:
                - component: oh-button
                  config:
                    active: =(items[props.raumBoost].state === "ON")
                    text: Boost
                    action: command
                    actionItem: =(props.raumBoost)
                    actionCommand: ON
                    large: true
                    raised: true
                    class:
                      - margin
                - component: oh-button
                  config:
                    active: =(items[props.raumBoost].state === "OFF")
                    text: Automatik
                    action: command
                    actionItem: =(props.raumBoost)
                    actionCommand: OFF
                    large: true
                    raised: true
                    class:
                      - margin

thanks a lot!

ysc · January 22, 2021, 2:46pm

component: f7-card
config: {}
slots:
  default:
    - component: f7-card-header
      slots:
        default:
          - component: Label
            config:
              text: Title
          - component: oh-toggle
            config:
              item: aaa_Sw
    - component: f7-card-content
      slots:
        default:
          - component: f7-segmented
            config:
              raised: true
              round: true
              strong: true
            slots:
              default:
                - component: oh-button
                  config:
                    text: Boost
                - component: oh-button
                  config:
                    text: Auto

wzbfyb · January 22, 2021, 7:27pm

Awesome, thanks. Will give it a try!

wzbfyb · January 23, 2021, 12:49pm

Works perfectly fine, thanks a lot!