Toggle Schalter auf einer expandable f7-Card funktioniert nicht

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Antworten
Mr. BJ
Beiträge: 83
Registriert: 27. Sep 2017 08:04

Toggle Schalter auf einer expandable f7-Card funktioniert nicht

Beitrag von Mr. BJ »

Guten Morgen zusammen,

ich habe zwar ein Post im Forum von openHAB gemacht aber dort kann mir wohl keine helfen und nun wollte ich es hier auch einmal versuchen. Vielleicht habe ich Glück und jemand hat auch schon einmal mit Expandables f7-Cards experementiert.
Die Funktion an sich funktionert, also mit dem erweitern der Karte aber mein Problem ist das ich im nicht erweiterten Zustand einen Toggle-Button (Lampenschalter) habe und wenn ich auf diesen klicke schaltet dieser nicht die Lampe sondern expandiert wieder die Karte.
Ich habe den Button schon mit z-index: 999 ausgestattet aber hilft leider auch nicht.
Ich finde den Fehler einfacht nicht.
Vielleicht hat hier jemand die Rettende Idee.

Code: Alles auswählen

uid: Lampensteuerung2
tags: []
props:
  parameters:
    - description: Name der Lampe/Birne.
      label: Name
      name: name
      required: true
      type: TEXT
    - default: "3"
      description: Lampentyp (1 = Nur Schalter, 2 = White, 3 = Color)
      label: Lampentyp
      name: lamptype
      required: true
      type: INTEGER
      min: 1
      max: 3
    - default: "1"
      description: hue Lampe (0 = Nein, 1 = Ja)
      label: hue
      name: hue
      required: true
      type: INTEGER
      min: 0
      max: 1
    - context: item
      label: Schalter
      name: switch
      required: true
      type: TEXT
    - context: item
      description: Farbe
      label: Farbe
      name: color
      required: true
      type: TEXT
    - context: item
      description: Farbtemperatur
      label: Farbtemperatur
      name: colorTemperature
      required: true
      type: TEXT
timestamp: Sep 1, 2021, 9:52:41 AM
component: f7-card
config:
  expandable: true
  swipeToClose: false
  backdrop: false
  class:
    - card-expandable-animate-width
  style:
    height: 32px
    width: auto
    z-index: 0
slots:
  default:
    - component: f7-card-content
      config:
        style:
          width: 100%
          padding-top: 0px
          padding-left: 10px
          padding-right: 10px
          z-index: 1
      slots:
        default:
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                margin: 0px
                height: 45px
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      height: 30px
                      width: 100%
                      white-space: nowrap
                      flex-wrap: nowrap
                    class:
                      - align-items-center
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            width: 40px
                        slots:
                          default:
                            - component: oh-toggle
                              config:
                                item: =props.switch
                                style:
                                  z-index: 999
                      - component: f7-col
                        config:
                          style:
                            width: auto
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =props.name
                                font-size: 24px
                                style:
                                  color: grey
                                  overflow: hidden
                                  white-space: nowrap
                      - component: f7-col
                        config:
                          style:
                            width: 40px
                        slots:
                          default:
                            - component: oh-button
                              config:
                                visible: =props.lamptype > 1
                                iconF7: arrowtriangle_down_square
                                iconColor: gray
                                iconSize: 28px
                                action: variable
                                actionVariable: Unfold
                                actionVariableValue: '=(vars.Unfold == "null") ? true : !(vars.Unfold)'
                                style:
                                  position: absolute
                                  top: 0px
                                  right: 0px
                                  z-index: 999
                                class:
                                  - cell-open-button
                                  - card-opened-fade-out
                            - component: oh-button
                              config:
                                iconF7: xmark_circle
                                iconColor: gray
                                iconSize: 28px
                                action: variable
                                actionVariable: Unfold
                                actionVariableValue: '=(vars.Unfold == "null") ? false : !(vars.Unfold)'
                                style:
                                  position: absolute
                                  top: 0px
                                  right: 0px
                                  z-index: 999
                                class:
                                  - card-opened-fade-in
                                  - cell-close-button
                                  - card-close
          - component: f7-block
            config:
              class:
                - card-prevent-open
                - card-content-padding
              style:
                height: auto
            slots:
              default:
                - component: oh-list
                  config:
                    class:
                      - padding
                  slots:
                    default:
                      - component: Label
                        config:
                          visible: =props.lamptype == 3
                          text: Farbe
                          style:
                            padding: 7px
                            border-bottom: 1px solid grey
                            font-weight: 600
                            color: grey
                      - component: oh-colorpicker
                        config:
                          visible: =props.lamptype == 3
                          item: DeckenlampeFlurFarbe
Gruß Björn


Pi4 mit debMatic, Docker [openHAB 3.3, Mosquitto];
Philips Hue Bridge; amazon echo; HomeMaticIP

Antworten