In Ionic 2, I want to hide the back button and need to show the menu bar. So, I have written the following code:
<ion-navbar hideBackButton="true">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title><b>Board</b> Bullets</ion-title>
<button class="pull-right" ion-button clear>
<i class="icon dripicons-dots-3 r_90 submenu"></i>
</button>
</ion-navbar>
But, what's happening is the it hides both the back button and menu bar.
Can anyone tell me how to hide the back button only?
I think you should read Navigation documentation of Ionic 2. Here is a good start.
Basically, when you use this.navCtrl.push(Page), Page is pushed to the navigation stack. When you use this.navCtrl.setRoot(Page), Page is set to the root of navigation stack.
If you do not wish to go on back page (not even from hardware back button), you can use this.navCtrl.setRoot(Page) to set the page at the root. Here, you will have your menu button instead of back button.
All you need to know its how ionic 2 navigate to debug your error. Pay attention:
If you have a root page A and you navigate with push into page B, in page B you will have a back button. In page B if you navigate back with pop, in page A will have the menu button.
But if you are in page A and navigate with setRoot to page B, in page B you will have again the menu button.
And other thing to keep in mind its that ionic navigation works like a stash of views.
So the back button will appear only if you have some view in the stack to navigate, if there isn't a view, it means is a root view, the menu button will appears.
If you need to hide the backbutton keep this in mind and reorganize your navigation, maybe helps you and wont have to add extra logic, just navigation.
Related
I have a list and I want to refresh the list when user pulls it down. I expect that only the list should move down when scrolled, and the rest of the components in the page will remain on their positions. But when I pull down the page, the whole page scrolls down, along with any other components on the screen. Any idea how it will work?
It will move everything in your ion-content tab.
<ion-header>
<!--Won't scroll -->
</ion-header>
<ion-content>
<!--Will scroll -->
</ion-content>
I guess move anything you don't want to scroll outside of the content.
I have been struggling with this for a while now. I'm trying to navigate to one tab (let's say Home) to another (let's say About). I'm able to navigate that either the page get's added to nav stack, but then it's not changing active tab. That, or then we use select to set the active tab, which means that I lose the navigation stack. Here's the latter option code:
export class HomePage implements OnInit {
tab: Tabs;
constructor(public navCtrl: NavController) {
this.tab = this.navCtrl.parent;
}
navigate() {
this.tab.select(1);
}
But this means that as mentioned, I lose the nav stack and can't use the back button that would show if I use push. That brings us to the other option, when I use .push():
this.navCtrl.push(About)
The active tab won't change, but still shows Home as the active tab, even though we are successfully navigated to About tab.
So what I wish for, is to have both the 'Back' button and the active tab (About) selected when I'm clicking the button to go to About from Home. Here's a demo with the push option, as you can see the active tab does not change: https://plnkr.co/edit/6KIL8mxfTMCsvACpiD1K?p=preview
PS. I looked at this question, but it wasn't useful to me: Changing tabs dynamically in Ionic 2
I'm using Ionic 3
I don't think this is how the tabs component is intended to work. With tabbed navigation you kind of have n navigation stacks (where n is the number of different tabs you have) which means if you .push() a new page on the nav-stack you push it on the stack of the currently selected tab.
Switching to another tab kind of is the same as starting with a new root, you start with the initial page ([root]="yourFirstPage") and can then add new pages to this particular nav-stack (and you can pop them off the nav-stack with a back button).
In you particular example you are trying to .push() the About page on the stack of the Home page and expect the NavController to know that you intended to switch to another stack and to push a new page to the new stack.
One solution to your problem could be to always remember the previous tab when you use .select() and display back button manually in the navbar which uses .select(previousTab) on click.
I hope that makes things clearer for you.
It's the default behaviour to act like this. When you select a tab it clears the nav stack and set the root to another page. When you push your about page when in home page you're pushing a new page in your home nav stack, this is why it doesn't change and shoudn't change.
The reason to use tabs is that you can segment and divide stuff in they correct categories. When updating a product you don't whant the user the see, for example, billing information in the same stack of products since it doesn't belongs to that category.
The .select() method (whose you've implemented in your home.page.ts) is the closest you can have from beeing able to select a tab without clicking in a specific tab.
What you can do is simply remove about from beeing a tab and push it in home OR remove the button to go from the home to about page, since there's already a tab for this.
In any case what you want to do is an error that Ionic team removed the possibilities from people doing.
Hope this helps you.
I have an Ember.js component called table-viewer. It has a toolbar which is a div with buttons. I have another ember component called report-viewer. It contains a variety of things including a table-viewer.
I want to have report-viewer add some buttons to the toolbar. What I have works but breaks the Ember connection with the element so I can't change the button text after moving it. Is there a better way to do this?
I have a lot more components than I just said, so defining the complete toolbar in table-viewer and setting flags for what to show would be annoying to manage.
Below is what I currently have in table-viewer so that any component can add additional buttons to the toolbar:
Ember.$('#toolbar').append(Ember.$('#additionalToolbar').html());
Ember.$('#additionalToolbar').remove();
I figured it out! The following works without breaking Ember connections:
Ember.$('#additionalToolbar > button').appendTo(Ember.$('#toolbar'));
It's hard to say what the best approach is without seeing the relevant code. That said, my first suggestion would be a simple yield:
report-viewer/template.hbs
{{#table-viewer}}
<button>
Some button from the report viewer...
</button>
{{/table-viewer}}
table-viewer/template.hbs
<nav>
<button>
Button one
</button>
<button>
Button two
</button>
{{yield}}
</nav>
<table>
...
</table>
If you need more that one yield, you can achieve multiple named yields with this approach.
I'd also suggest splitting the toolbar out into its own component if you haven't already. It feels wrong to put a toolbar button as the block contents of the table-viewer component as I've done above.
I have an application using UITabBarController. There are 5 tabs (tab1, tab2, cameraTab, tab3, tab4). When user taps on middle tab , the modal view will appear hiding the TabBar (in my case camera - UIImagePickerController). If user then taps on cancel button on that modal view, how do I make it to return to previously selected tab. For example: if i am on tab2 and I tap on the camera tab, modal view appears and then I tap on cancel, how do i return back to tab2 automatically. The same goes for all other tabs, if I'm on tab3 it should return to tab 3 and so on. Right now it remains on camera tab without modal view - just blank view with background image.
I'd really appreciate if you can help me with some examples. I've been searching in various ways - there must be a way that UITabBarController keeps a record of previously selected tab.
Thank you
Personally, I think you should create a custom view where the middle camera tab would not be a tab at all, it would actually just be a button that presents the modal view and then that view would have a button to dismiss it. I would do a little research in http://idevrecipes.com/ to see if there is anything there. If not, maybe github. The tab bar itself is looking for views to push, not present.
I am sorry I couldn't give you more of an answer, but I wanted to give you something for waiting so long.
I have added on my web-sire some social buttons. Tweet share button works just fine but I have some issues with facebook and google+ button.
In fact I added this away the buttons : (the buttons are supposed to link to a web page through a parameter $URL
<div class="g-plusone" data-size="medium" href="{$URL}"></div>
and for facebook
<iframe src="http://www.facebook.com/plugins/like.php?href={$URL}&layout=button_count&show_faces=false&width=90&action=like&font=verdana&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 90px; height: 21px;" frameborder="0" scrolling="no"></iframe>
In fact I used iframe because my buttons are wrapped by divs that displays them in grey and color them the expected way on hovering.
The problem I have is that when clicking on the g+ no box appears, and when I click again, the g+ button displays a red triangle instead and I have a "+1 button errors" message : but I am in none of the case that would explain this kind of message.
When clicking on the facebook-like, I have nothing displayed on my facebook's wall...
Does anybody has an idea how to fix it ?
For the +1 button, I have a few things you can try. Is the actual button itself rendering also or are you getting unexpected behavior when you click it?
If the button isn't rendering, you might be missing the JavaScript library for Google+. The following code should be added to your post before the actual button gets rendered:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
If you are getting unexpected behavior when the button is clicked, you probably are having an issue with the URL parameter. You might be able to get by without passing a URL because the +1 button defaults to the current page. The following example shows the simplest case of rendering the +1 button for the current page:
<g:plusone></g:plusone>
If that correctly renders, you are putting something bad into the URL parameter or have something wrong with the strings in your parameters. For example, check that the strings you're using don't have backticks in the starting or closing quotes as opposed to single quotes.
The +1 documentation will have any additional details that you will need for configuring and customizing the button and its parameters. You can find it here:
https://developers.google.com/+/plugins/+1button/