Ionic default layout (template)

Asked

Viewed 130 times

0

Hello, I created an application with Ionic where I have several pages. The application initializes with an intro page then goes to the homepage. I wanted to know how to put a standard footer on every page, except the intro, all at once without the need to keep repeating the same code on every page. I tried to do this by putting the html code in the app.html file, in a way it works, but it also inserts the code in the Intro page and in this I do not want to have footer. Is there this flexibility to work with Ionic layout? Thanks in advance. (NOTE: I am using ionic3)

Follow the footer code I want you to repeat on every page 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

  • Jose, enter the source code of your page and footer.

  • Hello @Mikeotharan, all right? I put the code, I want it to be replicated on every page except the intro.

  • 1

    You can create a footer page and give an import for each page that will have the footer

  • I’m thinking here, if I don’t have this feature, maybe I could create a default page, and import it on the other pages, so I would type less code besides centralizing editing, but I don’t know if Ionic supports this feature.

  • Yes, I’m doing something similar using this method.

  • There is some different syntax to import the page, you can put the import command code for me?

  • import { Pagefooter} from '.. pages/footer/footer'; do not forget to set the footer in modules.ts

Show 2 more comments

1 answer

0


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

Commando: ionic g component footercustom

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

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 - Inside the page module that would use the footer it was necessary to import the component module:

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

Browser other questions tagged ionic layout footer

You are not signed in. Login or sign up in order to post.