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