When I navigate from page A to page B, I want to slide in the page B from the bottom upwards.
How can I do this in Ionic 3?
I have now
this.navCtrl.push(PageB,
{session: this.session},
{animate: true,
animation: 'transition',
duration: 500,
direction: 'forward'}
);
I tried to change the 'forward' in 'up' but that does not do anything.
Currently I am testing in Chrome browser.
Thanks
I think the navController is the wrong choice for this.
Mostly, the use case for sliding a page from bottom to top is when you want to show modal page. This can be done with the ModalController:
constructor(private modalCtrl: ModalController) {
}
showModal(): void {
let modal = this.modalCtrl.create(PageB, options);
modal.present();
}
Related
I need to add back navigation on swipe. I can do that fairly easily by just adding a swipe listener to the page view and calling goBack. But I really would like the animation that goes with it (in Instagram or FB) where as soon as you start dragging your thumb, the page translates to the right and the previous page starts to translate into view. And then once you get to a certain point it actually performs the navigation.
I tried animating the page, as well as the frame to the right figuring since the view isn't being destroyed it might work. But it doesn't display the page Im navigating back to.
Looking for help on how to accomplish this!
I guess you might have come across the other SO thread answering this question natively.
All you have to do is modify the default gesture recogniser on iOS frame.
export function onNavigatedFrom(args: EventData) {
console.log("Adding gesture...");
const frame = (<Page>args.object).frame;
if (frame.ios && !(<any>frame)._gestureRecognizer) {
const controller = frame.ios.controller;
const popGestureRecognizer = controller.interactivePopGestureRecognizer;
const targets = popGestureRecognizer.valueForKey("targets");
if (targets) {
let gestureRecognizer = UIPanGestureRecognizer.alloc().init();
gestureRecognizer.setValueForKey(targets, "targets");
frame.nativeView.addGestureRecognizer(gestureRecognizer);
(<any>frame)._gestureRecognizer = gestureRecognizer;
}
}
}
export function onNavigatedTo(args: EventData) {
console.log("Back to root page, removing gesture...");
const frame = (<Page>args.object).frame;
if (frame.ios && (<any>frame)._gestureRecognizer) {
frame.nativeView.removeGestureRecognizer((<any>frame)._gestureRecognizer);
(<any>frame)._gestureRecognizer = null;
}
}
Playground Sample
react-navigation: 3.2.1
I've create TopTabNavigator (using createMaterialTopTabNavigator) inside a Drawer (using createDrawerNavigator).
Swiping navigates between tabs but the first time I swipe from the direction of the drawer - the drawer will be the only thing that will open / close.
swiping between the tabs is stopped (click the buttons in the bar still works).
What can cause that?
const MainTab = createMaterialTopTabNavigator ({
Tab1: {
screen: Tab1Screen,
},
Tab2: {
screen: Tab2Screen,
},
});
const DrawerNav = createDrawerNavigator(
Main: {
screen: MainTab,
}
);
Adding link for Expo - but unfortunately there is a bug when using createDrawerNavigation inside expo.snack.io
In an Nativescript application I need to implement a custom navigation scenario for Android when user click on material/soft back button.
For simplicity, starting with login-tabs template (https://github.com/ADjenkov/login-tabs-ng) and I want implement a navigation like Instagram, Facebook, WhatsApp, Pinterest, and many more ...
That's with the example of login-tabs template, when I navigate from the Players tab to the Teams tab and then I tap the back button I want to return to the Players tab (on the page I left in this tab).
Today as the navigation history of the Teams tab outlet is empty and the navigation history of the root outlet is empty, the application is closes. I wish it was close if I tap on the back button after returning to the Players tab and if navigation history of Players tab is empty.
I hope it's clear, tell me if it's not the case.
Is there a way to implement this behavior?
Finally I implemented a solution that's inspired by the response of #Manoj.
I listen to the activityBackPressed event and set args.cancel = true for prevent default behavior.
At each Tab change I save the Tab previously visited. Then at every activityBackPressed event I check if the current outlet can go back or not with this.routerExtension.canGoBack({ outlets: [this.tabVisibleName], relativeTo: this.activeRoute }).
If not I return to the previous tab programmatically if the list of tabs visited is not empty. If the list of tabs visited is empty I set args.cancel = false for exit the app.
If this.routerExtension.canGoBack({ outlets: [this.tabVisibleName], relativeTo: this.activeRoute }) return true I simply go back : this.routerExtension.back({ outlets: [this.tabVisibleName], relativeTo: this.activeRoute });
Note : you must remove listener when application is going to background, otherwise you will have several listeners (one by resume) :
application.on(application.exitEvent, (args) => {
if (args.android) {
application.android.off(application.AndroidApplication.activityBackPressedEvent);
}
});
Thanks for your help
You need to save selected Tab in your data.service and when user go back to tabs.component.html you can use the selectedIndex. You can skip to listen to activityBackPressed as well in that case.
in your tabs.component.html
<TabView (selectedIndexChanged)="onSelectedIndexChanged($event)" [(ngModel)]="selectedTabIndex" width="100%">
and in your tabs.component.ts
constructor(
private routerExtension: RouterExtensions,
private activeRoute: ActivatedRoute,
private _dataService: DataService ) {
this.selectedTabIndex = this._dataService.selectedTabIndex;
}
and
onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const tabView = <TabView>args.object;
const selectedTabViewItem = tabView.items[args.newIndex];
this._dataService.selectedTabIndex = args.newIndex;
}
I've got a StackLayout where one of the entries is a GridLayout of a fixed size. Normally this GridLayout is not visible.
On tapping a button, I'd like the GridLayout be made visible - but I'd like to animate it open - - like a menu open.
Any ideas?
Actually toggling visibility is not too bad - it seems to animate the open - any way to control the speed?
The close operation is maybe too fast for what I'm trying to achieve.
You could animate the opacity of your grid. so when you click on it you would
// View is your gridView, this would hide it completely
view.opacity = 0;
// when you want to show it.
// fade in view.
view.animate({
opacity: 1,
duration: 250
}).then(() => {
//Set the visibility to collapsed after the animation is complete
//I believe you will want to do this so that the surrounding views adjust accordingly.
view.visibility='collapse';
}, (err) => {});
// when you want to hide it.
// fade out.
view.animate({
opacity: 0,
duration: 250
}).then(() => {
view.visibility='visible';
}, (err) => {});
You also may want to look into translate for you animations so you can move view down, left, up, right any way you want.
New to firefox development and trying my best to figure this out.
Say I want to call a function in tap_browser.js that will modify the DOM when the user clicks on the toolbar widget, how would I do this?
This is the code I have so far
require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "tap-icon",
label: "Tap",
contentURL: data.url("favicon.png"),
contentScriptFile: [data.url("tap_browser.js")]
});
I'm currently using a library to create the toolbar widget here: https://github.com/Rob--W/toolbarwidget-jplib
I don't know too much SDK but I helped someone with something that does. Check this out:
var my_wid = widgets.Widget({
id: "my-widget",
label: "CLIIIICK",
content: "CLICK ME",
width: 100,
onClick: function()
{
require('sdk/window/utils').getMostRecentBrowserWindow().gBrowser.contentDocument.documentElement.innerHTML = 'hi';
}
});
what this does is it shows a panel with 0 width and height, you can put stuff in there, and when it shows it executes the onShow function to change the html of the current document. its not recommended to use innerHTML, addons arent accepted. Im just showing you a quick and dirty copy paste example. One that is different from the sdk doc page "Modifying the Page Hosted by a Tab"