How to dynamically apply CSS in Svelte

[jamestagal]

Hi @roobyz

I am working on the functionality we talk about on our call the other day about getting the Category/Tag containers to change colour when clicked (active) but I am not quite there yet I would appreciate you having a look for me please.

At present I have set a variable named 'current' to false then.

 let current = false;

Then I have added the CSS class to the div passing 'current'. And then on click making 'current' = true.

<div class="customStyle border border-y-black border-l-black" class:selected={current}>
<a on:click={() => current = true} href="catgs/{page}">{name}</a></div>

The issue I have at present is that all 3 Categories change their background colour when only clicking on one....!! I was looking the following 2 pages on Svelte's tutorial site.

1. Class directives
2. Shorthand class directive

Pls see my aside.svelte file if possible here for the changes.

Best regards, Ben

[roobyz]

hi @jamestagal

I pushed a commit to "Add active class to aside for tags and catgs". I changed three files:

1. catgs.svelte: to export the current catg value to the aside
2. tags.svelte: to export the current tag value to the aside
3. aside.svelte: to set the "active" class to the current tag or category when selected, and to add a style for the active class that changes the category or tag to the accent color

Roberto

[jamestagal]

Hi @roobyz Thank you for these changes. I see the changes and it works well having the active category and tags text highlighted. This is a great UI improvement for me because you get a visual indication of what you have clicked on. Thank you for implementing this. :)

One question. In the post_meta.svelte i see that the following classes are not being used and get an error "Unused CSS selector"..

  .feature a {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
  }
  .feature a:hover {
    color: var(--accent);
  }

Do we need to add the on:ckick method on the 'a' tags?

Cheers, Ben

[roobyz]

Hi @jamestagal

Sorry, I thought I removed those two CSS blocks. I just pushed a commit to fix that. You can just delete them. ;-)

Roberto

[roobyz]

Hi @jamestagal

Something to note. On my original code when you click on a tag or category, the heading changes, but on your code it does not. It is one of the reasons why I didn't think to add the active style to the links and why I always know which one I selected. For example:

\\ page title, my version
Category: {catg}

\\ page title, your version
Category

In any case, I like the active class on the links.

Cheers, Roberto

[jamestagal]

Hi @roobyz Yes. agreed. Thanks. Though, I still have the [[catg}](https://github.com/jamestagal/edtechdesigner/blob/b124f02e8239f5ba098f9c3dbf3abf0881e79c48/layouts/components/list_catgs.svelte#L29 )but I have separated the text 'Category' to appear above the cards. So we have a same outcome just different styling.

Cheers, Ben