Aktiivisten linkkien tyylittely Angularissa
Voit tehdä niin, että linkit, joiden URL
osuu osoiterivin osoitteeseen, korostuvat
jollain tyylillä, esimerkiksi värillä. Tätä
varten Angularissa on erityinen
attribuutti RouterLinkActive.
Katsotaan kuinka se toimii. Ensin tuomme sen:
import { RouterLinkActive } from '@angular/router';
Kirjoitetaan dekorattoriin:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Ja nyt lisäämme tämän attribuutin linkkeihimme:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Kuten näet, esimerkissämme attribuutin
arvo on active. Tämä on CSS-luokan nimi,
joka annetaan aktiiviselle linkille. Nyt
voimme tyylitellä ne haluamallamme
tavalla:
.active {
color: red;
}
Tyylittäkää aktiiviset linkit projektissanne.
