Hello all,
I have a card widget which is expndable with a slider at the top but i can’t use it. If I cklick on the slider it will expand but i want to use the slide where is my error
uid: Cell_ColorLight_Card_1
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
description: Item to control on/off
label: Item
name: item_schalter
required: false
type: TEXT
- context: item
description: Item to control brightness
label: Item
name: item_brightness
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 24, 2024, 8:29:14 AM
component: f7-card
config:
expandable: true
style:
--f7-card-expandable-tablet-height: 75vh
--f7-card-expandable-tablet-width: 35vw
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 150px
margin-left: 5px
margin-right: 5px
margin-top: 10px
noShadow: false
padding: 0px
swipeToClose: true
slots:
default:
- component: oh-button
config:
class:
- cell-open-button
- card-opened-fade-out
color: black
iconF7: expand
iconSize: 30px
style:
padding-bottom: 35px
padding-top: 10px
position: absolute
right: 0
top: 0
z-index: 0
- component: f7-card-content
config:
style:
width: 100%
slots:
default:
- component: oh-button
config:
class:
- card-opened-fade-in
- cell-close-button
- card-close
color: black
iconF7: xmark_circle_fill
iconSize: 30px
style:
padding-bottom: 35px
padding-top: 10px
position: absolute
right: 0
top: 0
z-index: 999
- component: f7-block
config:
class:
- no-padding
style:
height: 150px
margin: 0px
background: none
slots:
default:
- component: f7-row
config:
bgcolor: green
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 25px
font-weight: 600
text: steckdose
- component: oh-slider
config:
item: =props.item_brightness
max: 100
min: 0
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
bottom: 0px
left: 0px
position: relative
width: calc(100% - 40px)
z-index: 999
- component: oh-toggle
config:
item: =props.item_schalter
style:
position: absolute
right: 2em
top: 15px
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
outline: false
slots:
default:
- component: f7-list
config: {}
slots:
default:
- component: oh-toggle-item
config:
color: green
icon: oh:poweroutlet
item: =props.itemSwitch
title: Steckdose
- component: oh-label-item
config:
color: blue
icon: f7:chart_bar_circle
item: =props.itemDailyTotalPower
title: Daily Total Power
- component: oh-label-item
config:
color: blue
icon: f7:chart_bar
item: =props.itemActualPower
title: Actual Power
- component: oh-label-item
config:
color: blue
icon: f7:chart_bar_square_fill
item: =props.itemTotalePower
title: Totale Power
- component: oh-webframe-card
config:
borders: false
class:
- display-block
height: 240px
noBorder: false
noShadow: true
src: =props.URL.replace('{period}', vars.selectedPeriod ||
[props.timerange.split(',')[0].split(';')[0]])
- component: f7-segmented
config:
class:
- padding-bottom-half
outline: false
round: false
style:
--f7-button-border-radius: 4px
--f7-button-font-size: 14px
--f7-button-font-weight: 300
--f7-button-outline-border-width: 1px
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
--f7-button-text-transform: none
margin-left: 10px
margin-right: 10px
margin-top: 250px
slots:
default:
- component: oh-repeater
config:
for: size
fragment: true
sourceType: range
slots:
default:
- component: oh-repeater
config:
for: period
fragment: true
in: =[props.timerange.split(",")[loop.size].split(";")[1]]
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectedPeriod
actionVariableValue: =props.timerange.split(",")[loop.size].split(";")[0]
fill: "=(([props.timerange.split(',')[loop.size].split(';')[0]] ==
vars.selectedPeriod) ||
(props.timerange.split(',')[0].split(';\
')[1] === loop.period) &&
!vars.selectedPeriod) ? true : false"
outline: true
round: false
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
text: =loop.period