Change the header color of a container withing a ListView

I have a listview component with a dynamic amount of containers. I got to populate a table with data that comes from a container, but i need to improve the user experience by changing the header color of the container used to populate the table, so the user can get where comes the data. Is there a way to make something like a highlight of the selected container?. Thanks for your support!!!

Click on the first container in the listview.
The container should have a Header in "Addons"

In the container, go to Appearance -> Styles -> Header background

Yes i know that. What i want is to change the color of the selected container not all the containers, the container on which i clicked to got the data, keeping the other containers with their default header color.

In that case, I would probably use a variable to track the clicked item. You can have an event on the container that triggers on click and sets the variable to the clicked item. Then, in the setting that @whynot mentioned, you can a ternary that checks if item === the variable's value.

CleanShot 2024-11-13 at 10.12.27

Hello Tess, how are you?. I already tried it, without success.
I already tried it without success. What I did was the following:

  1. Define a variable of type boolean called sw with initial value false
  2. Defines a variable that contains the final value of the container header color. This variable is called default_color
  3. Create a click event that, when triggered on the container, changes the value of sw to true and in the header color of the container changes it to the color of the variable if the condition of sw is true is met in this way: { { sw.value ? default_color.value:'FFFFFF' }}

It effectively changes the color, but not only of the container on which the click was made, but it changes the color of all the containers, which is not what is desired.

Tess, i already solved it.
Thanks!!!

1 Like

:wave: Glad to hear! :smile: