Ionic - rodapé Javascript

Esta diretiva adicionará uma barra de rodapé na parte inferior da tela.

Usando rodapé

O rodapé Ionic pode ser adicionado aplicando um ion-footer-barclasse. Trabalhar com ele é o mesmo que trabalhar com cabeçalho. Podemos adicionar um título e colocá-lo no lado esquerdo, centro ou direito da tela usando oalign-titleatributo. Com o prefixobar, podemos usar as cores iônicas. Vamos criar um rodapé de cor vermelha com o título no centro.

<ion-footer-bar align-title = "center" class = "bar-assertive">
   <h1 class = "title">Title!</h1>
</ion-footer-bar>

O código acima irá produzir a seguinte tela -

Adicionando Elementos

Podemos adicionar ícones de botões ou outros elementos ao ion-footer-bare seu estilo será aplicado. Vamos adicionar um botão e um ícone ao nosso rodapé.

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

O código acima irá produzir a seguinte tela -

Adicionando sub rodapé

Mostramos como usar um subcabeçalho. Da mesma forma que um sub-rodapé pode ser criado. Ele estará localizado acima da barra de rodapé. Tudo o que precisamos fazer é adicionar umbar-subfooter classe para o nosso ion-footer-bar elemento.

No exemplo a seguir, adicionaremos o sub-rodapé acima da barra de rodapé, que criamos anteriormente.

<ion-footer-bar class = "bar-subfooter bar-positive">
   <h1 class = "title">Sub Footer</h1>
</ion-footer-bar>

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons" ng-click = "doSomething()">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

O código acima irá produzir a seguinte tela -