I am trying to create a custom card widget here is how it looks so far
What i want is for the list at the bottom to only be displayed when the card is expanded and to be hidden when the card is closed.
What is the best way to go about doing this? I have tried to use the expandable-open property, the card-opened-fade in class etc. but none seem to be working right. I am sure i am just not defining them right but can’t seem to find anything specific on what i should do.
Here is my current yaml
uid: widget_people
tags:
- Soll Tag
- homekit-look
- in use
props:
parameterGroups: []
timestamp: Oct 13, 2023, 9:34:26 AM
component: f7-card
config:
class:
- card-expandable-animate-width
expandable: true
hideStatusbarOnOpen: false
noShadow: false
style:
--f7-card-expandable-margin-horizontal: 5px
--f7-card-expandable-margin-vertical: 10px
--f7-card-expandable-tablet-border-radius: 2px
--moz-user-select: none
--ms-user-select: none
--webkit-user-select: none
box-shadow: '=(items.Armed.state == "ON") ? "0px 20px 40px rgba(255, 0, 0, 0.3)" : "0px 20px 40px rgba(0, 0, 0, 0.3)"'
display: flex;
flex-direction: column
height: 120px
justify-content: space-between
max-height: 120px
max-width: 400px
min-height: 120px
min-width: 110px
slots:
default:
- component: f7-card-content
config:
style:
width: 100%
slots:
default:
- component: f7-block
config:
class:
- no-padding
style:
margin: -4px
slots:
default:
- component: f7-row
config:
class: justify-content-left
slots:
default:
- component: f7-col
slots:
default:
- component: f7-chip
config:
mediaBgColor: green
text: Hillary
visible: =(items["Hillary"].state == "ON")
slots:
media:
- component: f7-icon
config:
f7: person_fill
- component: f7-chip
config:
mediaBgColor: green
text: Zachary
visible: =(items["Zachary"].state == "ON")
slots:
media:
- component: f7-icon
config:
f7: person_fill
- component: oh-repeater
config:
for: item
fragment: true
groupItem: Guests
sourceType: itemsInGroup
slots:
default:
- component: f7-chip
config:
mediaBgColor: green
text: =loop.item.label
visible: =(items[loop.item.name].state == "ON")
slots:
media:
- component: f7-icon
config:
f7: person_fill
- component: f7-col
slots:
default:
- component: f7-chip
config:
mediaBgColor: '=(items.Out_Of_Town_State.state == "OFF") ? "red" : "green"'
text: =(items.Out_Of_Town_State.state == "OFF") ? "Out of Town":"In Town"
slots:
media:
- component: f7-icon
config:
f7: person_fill
- component: f7-chip
config:
mediaBgColor: '=(items.gPresent.state == "0") ? "red" : "green"'
text: =(items.gPresent.state == "0") ? "Away":"Home"
slots:
media:
- component: f7-icon
config:
f7: person_fill
- component: f7-block
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-list
slots:
default:
- component: oh-repeater
config:
cacheSource: true
for: item
fragment: true
groupItem: gPresent
sourceType: itemsInGroup
slots:
default:
- component: oh-toggle-item
config:
color: '=(items[loop.item.name].state == "ON") ? "yellow" : "gray"'
icon: f7:lightbulb
iconColor: '=(items[loop.item.name].state == "ON") ? "yellow" : "gray"'
item: =loop.item.name
title: =loop.item.label