0

Ola, criei uma aplicação com ionic onde tenho várias páginas. A aplicação inicializa com uma pagina de intro em seguida vai para a pagina inicial. Queria saber como colocar um footer padrão em todas as páginas, exceto a intro, de uma única vez sem a necessidade de ficar repetindo o mesmo código em todas as páginas. Tentei fazer isso colocando o código html no arquivo app.html, de certa maneira funciona, porém ele também insere o código na pagina Intro e nessa eu não quero que tenha footer. Existe esta flexibilidade de trabalhar com layout no ionic? Desde já agradeço. (Obs: Estou usando o ionic3)

Segue o código do footer que quero que repita em todas as páginas exceto a inicial (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>
7
  • José, coloque o código fonte de sua page e o footer. Commented 7/08/2018 às 22:32
  • Ola @MikeOtharan, tudo bem? coloquei o código, quero que ele seja replicado em todas as páginas exceto a intro. Commented 7/08/2018 às 22:40
  • 1
    Você pode criar uma página footer e dar um import para cada página que terá o footer Commented 7/08/2018 às 22:43
  • Estou pensando aqui, caso não tenha este recurso, talvez pudesse criar uma página padrão, e dar um import dela nas outras páginas, assim digitaria menos código além de centralizar a edição, mas não sei se o ionic da suporte a esta funcionalidade. Commented 7/08/2018 às 22:43
  • Sim, eu estou fazendo algo parecido usando este método. Commented 7/08/2018 às 22:44

1 Resposta 1

0

1 - A solução utilizada foi a criação de um componente footercustom padronizado que pode ser utilizado em qualquer página desejada, para isso utilizando o ionic cli criei o componente:

Comando: ionic g component footercustom

2 - Depois dos arquivos gerados inseri o código html do footer no arquivo footercustom.html

3 - Para permitir a utilização das tags do ionic no código html foi necessário importar no decorator o módulo IonicPageModule. (component.module.ts)

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

4 - Dentro do módulo da pagina que iria utilizar o footer foi necessário a importação do módulo do componente:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .