CODEWITHSUNDEEP
cordovaionic-frameworkionic2ionic3
Nag
Nag

Reputation: 199

Ionic 3 static menu at bottom without using Tabs component or Custom component

I am building an android application using Ionic 3. I have a requirements, please post your suggestion on this.

I need to have static menu at the bottom (similar to Tabs component) of the screen for all the screens. I know that I can create a custom component and place it in all the html templates. But when I use custom component it reloads with every page load because it is inside of every html template. I don't want to reload the menu with every page load. It should be static outside of all the pages. Only pages should load based on the menu click.

This requirement is similar to Tabs component. I tried Tabs component, but the problem is I can't design the Tabs layout as per my requirement with custom button and images with some other content along with the menu buttons aside.

Please post your suggestion to overcome this problem. Thanks in advance.

Upvotes: 1

Views: 1985

Answers (2)

Mohammad Reza Mrg
Mohammad Reza Mrg

Reputation: 2033

maybe work wiht footer or some trick

https://forum.ionicframework.com/t/show-tabs-menu-bar-in-all-page-if-click-on-side-menu-then-tabs-menu-bar-is-not-visible-in-all-pages/101242/7?u=timsar

add all page from slide menu to tabs page and use *ngfor and show="false" for pages that you dont want to show their icon tab and in your app.component.ts instead of use this.nav.setRoot(mypage); use some function to load your page from tabs like the link in ionic forum.

Upvotes: 0

Oli
Oli

Reputation: 561

If you are using Ionic NavController (which is default) you will have an <ion-nav> tag in your App.component.html

The ion-nav will replace its content with the root component you declare - and anything you push on the NavStack using the NavController

The easiest solution would be to put your custom component next to your inside an tag:

///app.component.html
<ion-nav root=[rootPage]></ion-nav>
<ion-footer>
    <your-custom-menu></your-custom-menu>
</ion-footer>

(ion-footer just makes it stick to the bottom)

if you put something next to the ion-nav tag it will be outside of the navstack at not replaced when you navigate

Keep in mind that if you plan to use Modals from the ionic ModalControlelr that those can be on top of your App.component and hide it.

Read about ion-nav and ion-tabs here: https://ionicframework.com/docs/api/navigation/NavController/

Upvotes: 2

Related Questions