Ionic - rodapé

Ionic footeré colocado na parte inferior da tela do aplicativo. Trabalhar com rodapés é quase o mesmo que trabalhar com cabeçalhos.

Adicionando rodapé

A classe principal para rodapés iônicos é bar(o mesmo que o cabeçalho). Quando você deseja adicionar rodapé às suas telas, você precisa adicionarbar-footer classe para o seu elemento após o principal barclasse. Como queremos usar nosso rodapé em todas as telas do aplicativo, vamos adicioná-lo aobody do index.htmlArquivo. Também adicionaremos um título para nosso rodapé.

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

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

Cores do rodapé

Se você quiser estilizar seu rodapé, você só precisa adicionar a classe de cor apropriada a ele. Ao estilizar seus elementos, você precisa adicionar sua classe de elemento principal como um prefixo para sua classe de cor. Como estamos estilizando uma barra de rodapé, a classe de prefixo será umbar e a classe de cor que queremos usar neste exemplo é assertive (vermelho).

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

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

Você pode usar qualquer uma das nove classes a seguir para dar uma cor de sua escolha ao rodapé do aplicativo -

Classe de Cor Descrição Resultado
luz de barra Para ser usado para a cor branca  
bar estável Para ser usado para cor cinza claro  
barra positiva Para ser usado para a cor azul  
calmo Para ser usado para a cor azul claro  
barra equilibrada Para ser usado para a cor verde  
energizado pela barra Para ser usado para a cor amarela  
bar-assertivo Para ser usado para a cor vermelha  
bar real Para ser usado para a cor violeta  
bar escuro Para ser usado na cor preta  

Elementos de rodapé

Os rodapés podem conter elementos dentro dele. Na maioria das vezes, você precisará adicionar botões com ícones dentro de um rodapé.

O primeiro botão adicionado estará sempre no canto esquerdo. O último será colocado à direita. Os botões intermediários serão agrupados ao lado do primeiro no lado esquerdo do rodapé. No exemplo a seguir, você também pode notar que usamos oicon classe para adicionar ícones na parte superior dos botões.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

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

Se você quiser mover o botão para a direita, pode adicionar pull-right classe.

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

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