Hi, I have an icon that has 2 versions. Full color and grey. I’m using the Tabs element and I want the grey version to show when that tab is not active. I tried using a custom state but it wont work because when I change the image for 1 the Active state it changes for all of the states.
What’s the best way to do this? I could use 2 different images and show/hide them based on conditions, but I wanted to see if there’s a better way to do it.
The usual way is to use svg icon or font icon, and change the color property using state.
If you really need to change the image url, you cna always bind it to a formula and compare each tab to the actual selected index
Excuse me, but changing a background image is a usual way in different cases. I’ve tried formulas for bgimage and for source image, nothing works. Works if I use a variable and keep the image url inside, but it means that I need 2 workflows for pretty standard behavior accepted in W3C.
Now here’s a workaround: you can place two images and change their visibility based on parent’s hover state. You can change it via opacity or display option. But we definitely need this option to use images and create a custom design.
I agree. I am in a similar situation. I have an image (actually an icon) which I want to change on hover. I create a hover state for it, but when I change the image for a hover state, this image is also set for the default state. I used the workaround with a parent div containing the two images and a hover states that is inherited by the two child images. Then I apply block and none display to them. It is a workaround though.
Hey,
can you explain me more what does not work for binding formula on the source url? Can you give me an example?
@lissianski its because the url (or icon) is not statefull. We were thinking that this was not a common case, as you have to load the image on hover (which take time). Can you explain me more your usecase?
I opened a product ticket for this usecase, but we need to understand more your exact usecase (icon and image if i follow) to be sure to specify it correctly.
No problem. You create a button, set a bgimage, switch to “hover” and change an image. When you return to the initial state, you see the image from “hover” state.