Is there a way to close the mobile hamburger menu when you click on a menu link? We have a menu link that launches a modal window, but the menu is still showing behind it when I close the modal.
The state of the hamburger menu is kept in HamburgerMenuService. You can inject this service in your modal for example you can call the toggle(false) method in this component's onInit hook.
This way when the modal initializes the menu will close.
Thanks for the pointers. This is how I achieved the task:
Inject the HamburgerMenuService into the component:
import { HamburgerMenuService } from ‘#spartacus/storefront’;
Add my constructor:
constructor(private hamburger: HamburgerMenuService) {}
Access the toggle method in my modal function:
this.hamburger.toggle(true); // force close
Related
, I am playing with a new vuetify project. I've implemented sign in and signup using a v-dialog and I'm calling those v-dialogs from multiple components. Basically it works for me but I want the previous dialog box to be closed when I click a button to pop up the next v-dialog.
Current Working:
1)A sign in button is placed in navbar. when that button is clicked Sign in v-dialog pops up.
On sign in page there's another button which will open a v-dialog where the user can choose type of account. And on choose of a button another v-dialog opens as sign in page.
Solution I need:
A method or logic with which i can close the previous dialog box while new dialog box pops up
Kindly looking forward for some ideas
Cheers
If those dialogs are in different components, eventBus maybe the best way to communicate between non-parent-child components:
in "main.js":
new Vue({
data: {
eventHub: new Vue()
},
...
}).$mount("#app")
in your dialog component, or the component that contain the dialog:
created() {
this.$root.eventHub.$on("close-dialog", () => {
do something to close your dialog, such as this.visible = false
})
}
before open your new dialog:
this.$root.eventHub.$emit("close-dialog")
I want to open a menu on click of option button in header of a StackNavigator
snack link https://snack.expo.io/#abdulbsit/vengeful-macaroni-and-cheese
and here is the visual of screen https://drive.google.com/file/d/1mR3fL7KtF-BTp8OY9jlZlWvn3y_DGNhF/view?usp=sharing
Note: I don't want to use drawerNavigator, i want to make menu like this https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F0B8wSqcLwbhFuSGtLYzhXYWpRdk0%2Fbehavior-menu-multiple-position.mp4
you can do the above using making another component of menu using https://www.npmjs.com/package/react-native-material-menu
and import in your stack's Header button directly and to access navigation props in the menu component use withNavigation - https://reactnavigation.org/docs/en/connecting-navigation-prop.html
I want to close the keyboard when the user clicks a particular tab.
What's happening now is that when the keyboard is open and the user wants to switch to another tab, he must close/minimize the keyboard first.
The prop on a ScrollView keyboardShouldPersistTaps does what I want, but only for a ScrollView, not for a TabNavigator component.
You can use a function to hide the keyboard and call it from onClick of that tab.
This is the function you should declare in the same class in which onClick of that tab exists.
#SuppressWarnings("ConstantConditions")
public void hideKeyBoard(View view){
InputMethodManager imm = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(),0);
}
And then from the onClick, just call this by using hideKeyBoard();.
This will hide the keyboard whenever that tab is tapped.
And You should provide some of your code if seeking help.
I have a Bootstrap navbar.
clicking on the hamburger icon will open a menu.
One of the menu item is a button for another collapsable div.
i added this to this button:
$('.nav a').on('click', function(){
$(".navbar-toggle").click()
});
This will close the navbar menu and will show another div.
What i want is clicking on the hamburger icon again will CLOSE the new div and will NOT open the menu.
Basically what is need is the navbar-toggle to close all collapsable div and will open the menu only if there isn't any other div open.
This is my example: http://www.bootply.com/FqZYHFSWrh
Scroll down to get 770px page width
click on login, you will see that the menu disappear.
The next click on the hamburger icon i want to close the login container.
The second click (after the login container is close) i want to open the menu again.
You could add an event handler such as:
$('button.navbar-toggle').on('click', function(event){
if ($('.login-collapse').hasClass('in')) {
event.stopPropagation();
$('.login-collapse').collapse('hide');
}
});
How can I override the functionality of browser's back button? I have navigation view in page and I want to synchronize the browser back button and navigation view's back button. I can override navigation button's functionality but I don't know how to do the same thing for browser back.
Any help will be appreciated.
You have to use routes, this tutorial will show you how: http://railsdevtricksofthetrade.blogspot.com/2012/04/sencha-touch-2-routes-and-back-button.html?m=1
I managed to override the back button of the nav view with the following code
In your controller, create a new ref:
backToNav: 'myNavXtypeName button[text=Back]'
In the same controller, link the ref to a control:
backToNav: {
tap: 'backToNav'
}
Finally create the controller method that implements the navigation view's pop functionality.
backToNav: function() {
Ext.getCmp('myNavXtypeName').pop()
}
Done.
Read more about refs and controls here