This directive should be paired with one (or more) UISref directives.
It will apply a CSS class to its element when the state the uiSref targets is activated.
This can be used to create navigation UI where the active link is highlighted.
[uiSrefActive]: When this selector is used, the class is added when the target state or any
child of the target state is active
[uiSrefActiveEq]: When this selector is used, the class is added when the target state is
exactly active (the class is not added if a child of the target state is active).
The first anchor tag has the active class added when the foo.bar state is active and the id parameter
equals 25.
The second anchor tag has the active class added when the foo.bar state is active and the id parameter
equals 32.
A list of anchor tags are created for a list of bar objects.
An anchor tag will have the active class when foo.bar state is active and the id parameter matches
that object's id.
<li *ngFor="let bar of bars"><auiSref="foo.bar" [uiParams]="{ id: bar.id }"uiSrefActive="active">Bar #</a></li>
A single uiSrefActive can be used for multiple uiSref links.
This can be used to create (for example) a drop down navigation menu, where the menui is highlighted
if any of its inner links are active.
The uiSrefActive should be placed on an ancestor element of the uiSref list.
If anyof the uiSref links are activated, the class will be added to the ancestor element.
This is a dropdown nagivation menu for "Admin" states.
When any of admin.users, admin.groups, admin.settings are active, the <li> for the dropdown
has the dropdown-child-active class applied.
Additionally, the active anchor tag has the active class applied.
A directive that adds a CSS class when its associated
uiSref
link is active.Purpose
This directive should be paired with one (or more) UISref directives. It will apply a CSS class to its element when the state the
uiSref
targets is activated.This can be used to create navigation UI where the active link is highlighted.
Selectors
[uiSrefActive]
: When this selector is used, the class is added when the target state or any child of the target state is active[uiSrefActiveEq]
: When this selector is used, the class is added when the target state is exactly active (the class is not added if a child of the target state is active).Inputs
uiSrefActive
/uiSrefActiveEq
: one or more CSS classes to add to the element, when theuiSref
is activeExample:
The anchor tag has the
active
class added when thefoo
state is active.<a uiSref="foo" uiSrefActive="active">Foo</a>
Matching parameters
If the
uiSref
includes parameters, the current state must be active, and the parameter values must match.Example:
The first anchor tag has the
active
class added when thefoo.bar
state is active and theid
parameter equals 25. The second anchor tag has theactive
class added when thefoo.bar
state is active and theid
parameter equals 32.<a uiSref="foo.bar" [uiParams]="{ id: 25 }" uiSrefActive="active">Bar #25</a> <a uiSref="foo.bar" [uiParams]="{ id: 32 }" uiSrefActive="active">Bar #32</a>
Example:
A list of anchor tags are created for a list of
bar
objects. An anchor tag will have theactive
class whenfoo.bar
state is active and theid
parameter matches that object'sid
.<li *ngFor="let bar of bars"> <a uiSref="foo.bar" [uiParams]="{ id: bar.id }" uiSrefActive="active">Bar #</a> </li>
Multiple uiSrefs
A single
uiSrefActive
can be used for multipleuiSref
links. This can be used to create (for example) a drop down navigation menu, where the menui is highlighted if any of its inner links are active.The
uiSrefActive
should be placed on an ancestor element of theuiSref
list. If anyof theuiSref
links are activated, the class will be added to the ancestor element.Example:
This is a dropdown nagivation menu for "Admin" states. When any of
admin.users
,admin.groups
,admin.settings
are active, the<li>
for the dropdown has thedropdown-child-active
class applied. Additionally, the active anchor tag has theactive
class applied.<ul class="dropdown-menu"> <li uiSrefActive="dropdown-child-active" class="dropdown admin"> Admin <ul> <li><a uiSref="admin.users" uiSrefActive="active">Users</a></li> <li><a uiSref="admin.groups" uiSrefActive="active">Groups</a></li> <li><a uiSref="admin.settings" uiSrefActive="active">Settings</a></li> </ul> </li> </ul>