Change statistic text color with click handler

App Building
1

Is it possible to change the color of text within a statistic by using a click handler? I have a row of multiple statistics and would like to have each one highlighted as the user clicks on it. I know a workaround is to create a container for each statistic and use a border but I'd prefer not to change the size of my statistic boxes. Any help would be appreciated.

image
image1075×81 11.5 KB

2

Hi @Justin_Fuqua! You could potentially accomplish this using a variable:

  • have a variable named "activeStatistic" with initial value set to null
  • in the statistic event handlers, call activeStatistic.setValue({{ self.id }}) on click
  • in the component styles, use a template string for the color like {{ activeStatistic.value === self.id ? 'blue' : 'black' }}
2 Likes