I have a navigation bar in which first option is of the parent state and other opitions are for child states.I have used ui-sref-active to highlight which state is active. Now when I switch from one state to another the parent state is always highlighted along with the child state.
Any suggestions how to solve this?
<li ui-sref-active="nav-session-page">
<a ui-sref="dashboard">... </a>
</li>
<li ui-sref-active="nav-candidate-page">
<a ui-sref="dashboard.candidate" >..</a>
</li>
<li ui-sref-active="nav-interviewer-page">
<a ui-sref="dashboard.interviewer">..</a>
</li>
Now I have solved this problem, I have used ui-sref-active-eq for this purpose.What it does is that only the state which is active is highlighted and all other states remain the same event the parent state also.
Related
I'm using React version 16.6.3. I need some help to implement active menu item in sidebar. I need to do this thing: when the user clicks on any <li> in sidebar, the <li> must become active (for example, it gets class "active").
If the <li> is active and have treeview class, then, inside it, set to <ul> class "show" (if any)
Here's the code:
import React , { Component } from "react"
export default class Sidebar extends Component {
constructor(props) {
super(props);
this.state = { 'activeItem': 0 }
}
render() {
return (
<div className="main-sidebar">
<section className="sidebar">
<ul className="sidebar-menu tree">
<li className="nav-divider"></li>
<li className="header">PERSONAL</li>
<li>
<a href="#">
<span>Dashboard</span>
</a>
</li>
<li className="treeview">
<a href="#">
<span>Application</span>
</a>
<ul class="treeview-menu">
<li>Chat app</li>
<li>Project</li>
<li>Contact / Employee</li>
</ul>
</li>
<li className="treeview">
<a href="#">
<span>Application</span>
</a>
</li>
</ul>
</section>
</div>
)
}
}
The first question you should ask yourself is (if not always) how you store the data of the user selection. You might have multiple activeItem because this is a tree, ex. multiple branches can be open or close at the same time. You need to look for a data structure to hold that thinking first.
Here's a simple one, give each item an id/key, <li key="1-0-0"> and then you can track onChange event of this li and then inside onChange you can use a flat array structure to store the current state of this simple tree. For example, {'1-0-0': true }
There're lots of different ways to do data part, the above one is a simple idea to get you started. And after that, based on the captured data, you can then update the children attribute of each node, ex. <li className={ getNodeAttr('1-0-0')> assuming getNodeAttr is a utility function that give you back the class name string given the node name.
You should not bind active state on a navigation sidebar because if a user type a route directly in a browser the menu item won't be highlighted.
Instead, try to bind the active state to the route with NavLink (if you use react-router):
ref: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
Consider the following:
<ul>
<li id="dashboard" data-ui-sref-active="selected">
<a data-ui-sref="home">Dashboard</a>
</li>
<li id="jobs" data-ui-sref-active="selected">
<a data-ui-sref="home.foo">Foos</a>
<ul>
<li data-ui-sref-active="selected">
<a data-ui-sref="home.foo.foo1">Foo 1 list</a>
</li>
<li data-ui-sref-active="selected">
<a data-ui-sref="home.foo.foo2">Foo 2 list</a>
</li>
</ul>
</li>
</ul>
Problem is if the user currently click on another link, this "Dashboard" link state is still active.
How can I toggle the state active/inactive for Dashboard when user clicks it or clicks another link
Update:
I have tried this ui-sref-active-eq and it does work, however I cannot set this state back to active
That is because you are at child state of your home state, and thus it will always be active.
Use ui-sref-active-eq instead
According to the docs:
Will activate when the ui-sref's target state or any child state is active. If you need to activate only when the ui-sref target state is active and not any of it's children, then you will use ui-sref-active-eq
Edit: Added in Plnkr for reference.
I have a nested ul-li structure. I have mouseover & leave at each li. 'mouseleave' gets triggered when ever I move out of li but not if I move to inner ul within li. Here is my plunker. For eg in below if I move from parentli to childul it does not trigger mouseleave. But If i move out of parentli completely it triggers mouseleave. Any help appreciated.
http://plnkr.co/edit/xPXC78xJ9EqXGEOmOI3G?p=preview
<ul>
<li id="parentli" ng-mouseenter="showXBtn=true" ng-mouseleave="showXBtn=false">
<p >Hide</p>
<button ng-show="showXBtn"><span>x</span></button>
<ul id="childul">
<li ng-mouseenter="inner=true" ng-mouseleave="inner=false"> <p>Inner li</p><button ng-show="inner"><span>x</span></button></li>
</ul>
</li>
</ul>
It should not trigger because the <li id="parentli" .. is the parent so ng-mouseleave will call when mouse leaves the element, but if u hover the child its still on the parent element thats why its not going to trigger.
so
<ul>
<li ng-mouseenter="showXBtn=true" ng-mouseleave="showXBtn=false">
<p >Hide</p>
<button ng-show="showXBtn"><span>x</span></button>
<ul>
<li ng-mouseenter="inner=true; showXBtn=false" ng-mouseleave="inner=false; showXBtn=true"> <p>Inner li</p>
<button ng-show="inner"><span>x</span></button></li>
</ul>
</li>
</ul>
toggling the value of showXBtn when the hover of child element will resolve the issue.
<li ng-mouseenter="inner=true; showXBtn=false" ng-mouseleave="inner=false; showXBtn=true">
when ng-mouseenter on the child element we are going to set inner=true that will shoe the button in child element, and then set showXBtn=false which is going to hide button inside the parent element.
here is the DEMO
I've got a Bootstrap navbar dropdown menu, where clicking the parent link produces the dropdown list (default behaviour). The dropdown list of the parent is built using ngRepeat from an array of navigation data, and each has a ui-router state parameter, so it looks like:
<li class="dropdown">
<a href class="dropdown-toggle" data-toggle="dropdown">
Parent Link
</a>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in navCtrl.items()"
ui-sref-active="active">
<a ui-sref="some.state({ paramKey: paramValue })">
{{item.link}}
</a>
</li>
</ul>
</li>
But, even though it does seem to drop the active class on my link it throws this error in the console:
TypeError: Cannot read property 'name' of undefined
I am not entirely sure about the answer, but, as far as I know, why would you use navCtrl.items() using brackets? I have never seen it used like that before. Wouldn't the old item in items ng-repeat work? Sorry if it does not help at all.
I'm creating a sitemap in a custom CMS powered by Angular.
I hide the lower levels of pages and toggle their visibility with a button. I add ng-animate to animate the "opening" of the lower levels of the sitemap.
This works fine for the <ul>, but I would rather have its child <li> enter with a longer transition-delay for every item for a nice waterfall effect and this is where I get stuck.
At first I figured simply adding a transition-delay to the <li> would be sufficient, but for whatever reason I'm even unable to add a regular transition to the <li>. I read about the -stagger class, but it never gets applied.
Markup:
<ul>
<li ng-repeat="page in data"
ng-class="{'children-visible': isVisible}"
ng-init="isVisible = false">
{{page.pagename}}
<button ng-if="page.sub"
ng-click="$parent.isVisible = !isVisible">
</button>
<ul ng-if="page.sub"
ng-show="isVisible"
ng-animate="'animate'">
<li ng-repeat="page in page.sub">
{{page.pagename}}
</li>
</ul>
</li>
</ul>
Here's a picture of the markup if it helps you, er, picture it:
If relevant, I use version 1.2.16 of both angular.js and angular-animate.js.
So, in short: How do I add a stagger/transition delay to children of an element with ng-show?