To elaborate, I want to style my toggle button: I want this to have dynamic background colors depending on user selection. In the editor, the values are static, however. Since I can’t connect variables to these inputs, I’m hoping there is some way with vanilla js to interface with these components via some hidden API. Is there a way to ‘dynamically set static inputs’? (lol)
Use states for this) you can have conditions there. And also style children.
Ideally, except the user is going to be selecting using the color picker and could chose a near infinite amount of options. Using states allows me to set up variants, but nothing truly freeform. Would you mind elaborating on styling children?
Could you show me what you’re trying to accomplish? I think you should be able to bind colors.
1 Like
In the editor, the values are static, however. Since I can’t connect variables to these inputs
Nearly anything in our elements are dynamic and can be bound to data, do we forgot an essential property ? Can you show us what’s the exact property you want to make dynamic ?
You can subscribe to a weweb variable changing and use that to manually change a component’s CSS. We’ve done that kind of end-run before. So you have the option. Here’s the hardest part - subscribing to the variable.
That said, if there is a more no-code solution I would go for it - if @alexis can help with a more direct connection on the panel, go that way. I love working with powertools but you don’t need a backhoe to plant a flower. (At least not a small one!)
1 Like
Hey guys - this is the panel I’d like to link values to, but I can’t. I’ll have to explore Ray’s solution 
To clarify: they are NOT traditionally static, they are static as in ‘you can’t bind values’.
I was able to work around this by changing the background color if the toggle is enabled. Native integration would be super cool, but I totally understand if it’s not a priority!
I did have to use light js as the background-color property doesn’t seem to have any effect. It must be looking at those specific value values.
For anyone following my path, I used
var selector = wwLib.getFrontDocument.getElementById('myelement');
if (toggle) {
selector.style.backgroundColor = myUsersColorSelection
}
else {
selector.style.backgroundColor = yourDefaultColor;
}
I have a tendency to overcomplicate things, so by all means if you find another way, let me know!
Oh it seems like we forgot to make them bindable, to be honest I would consider it as a bug, so if you create a ticket on support.weweb.io we will try to handle it in the next couple of days
Edit : By looking at the color property behavior (opening a huge modal) I think this component is very very old, that’s why, it need a little refresh!
But well done for doing it with javascript, its a nice workaround
1 Like