Active links

[kevinrenskers]

Very cool tiny router! Especially love the fallback handling that bubbles up to parent routes.

One thing that seems to be missing though is support for detecting / styling active links. Have you thought about adding that to tinro?

[AlexxNB]

Thanks! Yes, I found that miss this feature and it should be implemented. As we have no special component like Links, I think the best way is take action for this feature.

My proposal is something like this:

<script>
import {active} from 'tinro';
</script>

<a href="/some/internal/path" use:active>Link</a>

The problems that we should solve here:

• Ability to set which CSS-class should be added to the anchor when link is active.
• Ability to mark will the link be active when exact or relative matched path.

By default, class will be active and href will match with page and all subpages(relative).

Variant1:

<a href="/some/path" use:active>Link</a>
<a href="/some/path" use:active={{exact:true}}>Link</a>
<a href="/some/path" use:active={{class:'customclass',exact:true}}>Link</a>

Variant2:

<a href="/some/path" use:active>Link</a>
<a href="/some/path" use:active data-exact>Link</a>
<a href="/some/path" use:active data-exact data-class="customclass">Link</a>

Variant3:

<script>
   import {active,activeExact} from 'tinro';
</script>

<a href="/some/path" use:active>Link</a>
<a href="/some/path" use:activeExact>Link</a>
<a href="/some/path" use:activeExact={'customclass'}>Link</a>

I like Variant3 Variant2, but we may have some discuss other variants before I start implementing this feature.

[kevinrenskers]

I kinda like variant 3 the least haha, 2 different things to import, seems a bit inconsistent. But any of these variants are better than nothing :D

[AlexxNB]

Nothing of three is ideal, as for me. Will wait some time. Maybe somebody will suggest a better way for this feature implementation.

[AlexxNB]

Just seen - I mean my prefered Variant is 2, not 3 =) It is most declarative.

[AlexxNB]

Just released active action. Please check v0.2.2 on NPM, and see Readme for more info

[Fractal-Tess]

What is the solution for the active class in 2022. I'm using tailwind for styling and it isn't exactly working. If I use the data-active-class it completely breaks if there is a space character.

Also, would you mind letting me know if I'm doing something wrong here, this code does not work

 <a use:active exact href="/example">Example link</a>

<style lang="postcss">
  .active {
    @apply border-primary border-b-2;
  }
</style>