https://github.com/veliovgroup/iron-router-helpers-for-meteor
An iron-router helpers for quickly adding classnames to your active navigation elements.
https://github.com/veliovgroup/iron-router-helpers-for-meteor
Last synced: about 1 month ago
JSON representation
An iron-router helpers for quickly adding classnames to your active navigation elements.
- Host: GitHub
- URL: https://github.com/veliovgroup/iron-router-helpers-for-meteor
- Owner: veliovgroup
- License: bsd-3-clause
- Created: 2015-01-28T10:18:05.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-10-12T16:47:47.000Z (over 9 years ago)
- Last Synced: 2024-05-01T11:29:11.804Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://atmospherejs.com/ostrio/iron-router-helpers
- Size: 167 KB
- Stars: 3
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
iron-router-helpers
==================
Quick Template helper to determine if the current route is active, for nav links.
Forked and updated from: [iron-router-active](https://github.com/XpressiveCode/iron-router-active)
Installation
============
`meteor add ostrio:iron-router-helpers`
Usage
=====
After installing the smart package, you'll have access to four new Templates helpers called `isActiveRoute`, `isActivePath`, `isNotActiveRoute` and `isNotActivePath`.
`isActiveRoute`|`isNotActiveRoute` works against route names, while `isActivePath`|`isNotActivePath` works against the current routes path. It works well with dynamic routes.
The helpers take 2 arguments:
1. `routeName` or `routePath`: used to determine whether or not the current route matches the routename that you've passed in (mandatory). This value is a regex expression so that you can pass in multiple routes with the | operator.
2. `className`: this is an optional argument. if you do not set it, it will default to `active`. you can override that value, by specifying your own. The two `not active` apis will return a class of `disabled` if you do not specify one.
```html
- ...
- ...
- ...
- ...
- ...
- ...
```
1. In the first example, the LI element will have a class of `active`, as we've used the default value.
2. In the second example, you can see an example of passing in multiple routes.
3. In the third example, the LI element will have a class of `on`, as we've overridden the default value with our own.
4. In the fourth example, you can see an example of checking to see if the current url contains the noun `products`, which will handle multiple scenarios, such as
- /products
- /products/new
- /products/edit
- So now if you had a top level `products` navigation element, it would stay highlighted even though your routename changes.
5. In the fifth and sixth examples returns `disabled` if routes is not active