I have a dripdrowns...once d last drop down is selected I'll be displaying some content, for that toggling I want to add some beautiful animations. Is there any react related things to implement this?
sidebarToggle(e) {
e.preventDefault();
document.body.classList.toggle('sidebar-hidden');
}
<a className="nav-link navbar-toggler sidebar-toggler" onClick={this.sidebarToggle} href="#">☰</a>
You can do like this
It will show button and on clicking that button will toggle sidebar kind of animation from the left
Related
I'm trying to show navbar dropdown over the slick slider. it's only show when i style .slick-slider z-index negative value, but this is not right because i can't click inside slider.
You can use a className in your dropdown menu with attribute "z-index:1000".
For example..
<div className="dropdown-menu">...</div>
on your .css file
.dropdown-menu{
... //another attributes for your div and finally..
z-index:1000
}
I am trying to implement segmented control button instead of normal radio button in Angular
Although If i remove CSS class, normal radio button is working fine and remain selected on navigating to another page os clicking anywhere on the same page, but after adding CSS, radio button selection do not remain intact and deselects.
Please help with this
HTML Code :
<div class ="segmented-control">
<div ng-repeat="p in LP">
<a href="#" class="list-group-item">
<label> {{p.label}}
<input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
</a>
</div>
</div>
CSS :
.segmented-control input[type="radio"] {
visibility:hidden;
}
.segmented-control .list-group-item {
display: inline-block;
}
In controller.js
calling below function to get the value of radio button
$scope.getElement= function(obj){
$scope.test = obj.target.value;
}
There are 2 issues with your code:
You have nested elements <div><a tag><label><radio></label> but the ng-model will be set only when you click exactly on the label. If you click little outside the label the ng-model will not be updated.
The gray color change that you see when you click on the segmented button does not mean that the radio button is selected. It is applying the following bootstrap class a.list-group-item:focus which means the button is in focus. That is why when you click outside the button the color changes back to white.
To solve this you have to add extra class to highlight the selected button and make sure your ng-model is updated no matter where the user clicks inside the div.
I have created a sample jsfiddle to demonstrate both the issues. Good luck and welcome to Stackoverflow!
I declare a nav button in index page and it shown all the page But I want remove from my home page. How can I remove that button in that specific pages
make $rootScope array of pages where you don't want to show the button. Then use ng-if in button tag to show n hide the button
<button ng-if="root.pageIgnore.indexOf($route.current.name) === -1">Shy Button</Button>
I'm making a functional button in my ionic app, and I want to know what I need to do to make a button centered on a blank ionic app load another page when clicked.
I have experimented with adding ng-click="loadPage()" to the button in my index.html file. I defined
$scope.loadPage = function() { $state.go(page.html)} in my controller.
switch your button with an anchor
<a class="btn btn-full" ui-sref="your.state">your text</a>
In my case, ng-view is a slider that has arrows to show the next template and the previous template. Currently it has one type of animation for the transition between templates.
<div data-ng-view data-ng-animate="{enter: 'slide-forward-enter', leave: 'slide-forward-leave'}"></div>
I want to extend the behaviour to do different animations depending on which arrow is clicked. Click on the "Next" arrow should perform slide-forward-enter & slider-forward-leave animation, while click on the "Previous" arrow should perform slide-reverse-enter & slider-reverse-leave.
How to achieve this?
You could add a class to your ng-view that changes based on the transition you want. From within your controller you could check whether the "Next" or "Previous" button was clicked, and setting the transition class accordingly. Let's assume you're defining 2 different transitions, 'forward' and 'back':
HTML
<div data-ng-view data-ng-animate="transitionClass"></div>
<button ng-click="slide('back')">Previous</button>
<button ng-click="slide('forward')">Next</button>
Controller
$scope.slide= function(myTransition) {
$rootScope.transitionClass = myTransition;
}
CSS
.forward-slide-enter {...}
.forward-slide-enter-active {...}
.forward-slide-leave{...}
.forward-slide-leave-active {...}
.back-slide-enter {...}
.back-slide-enter-active {...}
.back-slide-leave{...}
.back-slide-leave-active {...}
Further reading
See this question for details.