Thanks Justin. As usual you pointed me in the right direction. Once I used the correct terminology I was able to find an example to use to get the animation part to flash the colours and your linked example helped me construct a working basic widget as follows:
uid: Test_Colour_Animation
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 22, 2022, 5:39:15 PM
component: f7-page
config:
stylesheet: >
.myDIV {
animation: mymove 1s infinite;
} @keyframes mymove {
from {background-color: orange;}
to {background-color: gray;}
}
slots:
default:
- component: f7-badge
config:
class: myDIV
style:
border-radius: 20px
height: 20px
left: 10px
position: absolute
top: 240px
width: 25px
Giving:
Please can you point me in a direction now to be able to base the colour on an expression.
So something like:
bgColor: '=(items.ZonesClosed.state === "ON") ? "orange" : items.PartitionExitDelay.state === "ON") ? *ANIMATION* : "gray"'
I have no idea where do this?
The only other options I can think of is to use 3 x f7-badge
with visibility to decide which one is active - just seems too complex?
Thanks