Ionic default layout (template)

Question

Ionic default layout (template)

Navigation

#1 by (0 votes)

0

Hello, I've created an application with ionic where I have several pages. The application initializes with an intro page then goes to the home page. I wanted to know how to put a standard footer on all pages, except the intro, all at once without having to repeat the same code on every page. I tried doing this by putting the html code in the app.html file, in a way it works, however it also inserts the code in the Intro page and in that I do not want it to have a footer. Is there such a flexibility to work with layout in ionic? Thank you very much in advance. (Note: I'm using ionic3)

Follow the footer code that I want to repeat on all pages except the initial (Intro).

<ion-footer>
    <ion-row>
        <ion-col no-padding>
            <button no-margin ion-button full large color="primary">
                <ion-icon name="ios-chatbubbles"></ion-icon>
            </button>
        </ion-col>
        <ion-col no-padding>
            <button no-margin ion-button full large color="primary">
                <ion-icon name="heart"></ion-icon>
            </button>
        </ion-col>
        <ion-col no-padding>
            <button no-margin ion-button full large color="primary">
                <ion-icon name="person"></ion-icon>
            </button>
        </ion-col>
    </ion-row>
</ion-footer>

ionic layout footer

asked by anonymous 08.08.2018 / 00:27

1 answer

.NET Core - Generate Authentication Token for multiple APIS Ionic creator sending incomplete files?

score 0 · Accepted Answer

1 - The solution used was the creation of a standard footercustom component that can be used on any desired page, using the ionic cli created the component:

Command: ionic g component footercustom

2 - After the generated files I inserted the html code of the footer in the file footercustom.html

3 - To allow the use of the ionic tags in the html code, it was necessary to import the IonicPageModule module into the decorator. (component.module.ts)

@NgModule({
    declarations: [FootercustomComponent],
    imports: [IonicPageModule],
    exports: [FootercustomComponent]
})
export class ComponentsModule {}

4 - Within the module of the page that would use the footer it was necessary to import the component module:

@NgModule({
  declarations: [
    PrincipalPage
  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(PrincipalPage),
  ],
})
export class PrincipalPageModule {}