A simple link wrapper to wrap active links in an element that inherits
the link's active class. Useful for e.g. bootstrap where the active
class should be on the containing li not on the a.
If you are using ember version earlier than 2.3.0, install version 0.2.0 of this addon.
Produces (roughly) the markup:
<li class="active">
<a href="/" class="active">Index</a>
</li>ember install ember-cli-active-link-wrapper
There are several options available to adjust functionality:
| Option | Default | Description |
|---|---|---|
| tagName | 'li' | Components HTML tag name |
| linkSelector | 'a.ember-view' | jQuery selector for child {{link-to}}'s |
| activeClass | Computed** | Class name to apply when any child {{link-to}} is also active |
| disabledClass | Computed** | Class name to apply when ALL child {{link-to}}'s are disabled |
** Default class names are pulled from the child {{link-to}},
which in turn defaults to 'active'. You can change it on either
the child {{link-to}} or directly on the {{active-link}}.
See the examples below.
The .ember-transitioning-in and .ember-transitioning-out classes are also mirrored on the containing wrapper if they are present on the child link-to, allowing you to style the wrapper during router transitions.
Change the element type by defining the tagName.
<div class="active">
<a href="/" class="active">Index</a>
</div>Changing the activeClass on the {{link-to}} will also change
it on the {{active-link}}. Or, you can specifically define what
the activeClass will be for the {{active-link}}. Similarly,
the disabledClass functions the same way.
<li class="enabled">
<a href="/" class="enabled">Index</a>
</li>
<li class="enabled">
<a href="/" class="active">Index</a>
</li>The active and/or disabled classes can be disabled (pun intended)
by passing boolean false. This causes the class NOT to be applied,
even if child {{link-to}}'s are active/disabled.
<li>
<a href="/" class="disabled">Index</a>
</li>If the child {{link-to}}'s have their tagName changed,
be sure to adjust the selector. Always include the .ember-view
class since all link-to's apply that class.
<li class="active">
<button class="active">Index</button>
</li>This wrapper is also very useful as a container of a dropdown. Here is an example of a bootstrap dropdown within a navbar.
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active">
<a href="/" class="active">Index</a>
</li>
<li>
<a href="/other">Other</a>
</li>
</ul>
</li>Functionality of the {{active-link}} component has been extracted
into a mixin. That way you can import the mixin and use it in other
components, such as dropdown's.
// app/components/my-dropdown.js
import Ember from 'ember';
import ActiveLinkMixin from 'ember-cli-active-link-wrapper/mixins/active-link';
export default Ember.Component.extend(ActiveLinkMixin, {
// your code (or extend from an another addon component)
});git clonethis repositorynpm installbower install
ember server- Visit tests at http://localhost:4200/tests/
npm test(Runsember try:testallto test against multiple Ember versions)ember testember test --server
For more information on using ember-cli, visit http://www.ember-cli.com/.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent