Clickable Image Grid


Wondering how I could indicate that an image was selected in the image grid, sort of like this reference photo which adds a blue border to the selected image.

Hello, as you see in doc. There is no method to do so, also we can only handler the click event. the blur/hover event we can't handler now, also there are very little method for this component.

Here is my workaround if you hightlight the image when click it.

define a variable1, make default value to "" or "white" ect.
bind it to the border of image component with {{variable1.value}}
add event handler to click event.

If you want to unhightlight the component, you may need modify variable1 to object to keep more value. then in the js you can toggle the hightlight.
If you need the detail code, I would like to offer you some.

For a grid of images, you may want to explore Anson's suggestion with a grid list view of single image components. Then, your variable can be an array & you can update each item in the array for a different color:

Simple and Clever!
Any way to make the border thicker? as it is now, it's barely visible. Don't see an option in the settings

I don't see a way to do this currently, other than custom css, but I can submit this as a feature request