Adds a CSS class to an element when the link's route becomes active. Can be used in conjuction with route-href attribute.
Route Mapper is required to eager load all route hierarchy.
<a href="..." ssv-route-active>my route</a>
<!-- primary binding - sets the active class name -->
<a href="..." ssv-route-active="selected" >my route</a>
<!-- using route + params, on different element -->
<li ssv-route-active="route: hero; params.bind: {hero: 'rexxar'}"></li>
<!-- using url, on different element -->
<li ssv-route-active="url: /en/heroes"></li>
<!-- passing other options -->
<a ssv-route-active="active-class: selected; match-exact: false"></a>
Name | Type | Default | Required | Description |
---|---|---|---|---|
url | string |
- | no* | url to match with the current url. Cannot be used in conjunction with route . |
route | string |
- | no* | route name to match. Cannot be used in conjunction with url . |
params | string |
- | no | params for the route . Only used when using the route . |
activeClass | string |
"active" |
no | css class which gets added when its active. |
attribute | string |
"href" |
no | attribute to be used to read url from. |
matchExact | boolean |
true | no | determines whether the full url should match or partially. |
no*: required when the attribute isn't provided, such as href
Options which can be configured globally.
Name | Type | Default | Description |
---|---|---|---|
activeClass | string |
"active" |
Refer to attribute description. |
attribute | string |
"href" |
Refer to attribute description. |
matchExact | boolean |
true | Refer to attribute description. |