35 lines
1.1 KiB
Plaintext
35 lines
1.1 KiB
Plaintext
|
# is-href
|
||
|
|
|
||
|
|
`{{is-href routeName}}` is used to determine whether the current route is the
|
||
|
|
specified route, for example:
|
||
|
|
|
||
|
|
```hbs preview-template
|
||
|
|
<style>
|
||
|
|
.is-active {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<ul>
|
||
|
|
<li class={{if (is-href 'docs.helpers.is-href') 'is-active'}}>
|
||
|
|
Active
|
||
|
|
</li>
|
||
|
|
<li class={{if (is-href 'docs.helpers.not-is-href') 'is-active'}}>
|
||
|
|
Not Active
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
```
|
||
|
|
|
||
|
|
The Consul UI generally uses this on `<li>` elements of navigation, not the
|
||
|
|
`<a>` anchors themselves. There are cases of course where we need this for
|
||
|
|
links that are not in `<li>`s so its fine to use it on the `<a>` in those
|
||
|
|
cases.
|
||
|
|
|
||
|
|
We currently use the `is-active` classname throughout the app to mirror the
|
||
|
|
ember `<LinkTo />` class used for the same purpose.
|
||
|
|
|
||
|
|
Different to `ember-href-to` and `<LinkTo />` our custom `is-href` helper will
|
||
|
|
become `true` when you begin the transition to the specified route, not when
|
||
|
|
the specified route is loaded. This means active states will happen when the
|
||
|
|
user clicks the link and will remain active through the loading state until
|
||
|
|
the user clicks on another link.
|