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 -