Ionic - Botões

Existem vários tipos de botões no Ionic Framework e esses botões são sutilmente animados, o que aprimora ainda mais a experiência do usuário ao usar o aplicativo. A classe principal para todos os tipos de botão ébutton. Essa classe sempre será aplicada aos nossos botões e a usaremos como um prefixo ao trabalhar com subclasses.

Botões de bloqueio

Os botões de bloco sempre terão 100% da largura de seu contêiner pai. Eles também terão um pequeno enchimento aplicado. Você vai usarbutton-blockclasse para adicionar botões de bloqueio. Se você deseja remover o preenchimento, mas manter a largura total, você pode usar obutton-full classe.

A seguir está um exemplo para mostrar o uso de ambas as classes -

<button class = "button button-block">
   button-block
</button>

<button class = "button button-full">
   button-full
</button>

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

Tamanho do botão

Existem duas classes Ionic para alterar o tamanho do botão -

• button-small e

• button-large.

A seguir está um exemplo para mostrar seu uso -

<button class = "button button-small">
   button-small
</button>

<button class = "button button-large">
   button-large
</button>

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

Cores dos botões

Se você quiser estilizar seu botão, 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 a barra de rodapé, a classe de prefixo será umbar e a classe de cor que queremos usar neste exemplo é assertive (vermelho).

<button class = "button button-assertive">
   button-assertive
</button>

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 aos botões do aplicativo -

Classe de Cor	Descrição	Resultado
luz de botão	Para ser usado para a cor branca
botão estável	Para ser usado para cor cinza claro
botão positivo	Para ser usado para a cor azul
botão calmo	Para ser usado para a cor azul claro
botão equilibrado	Para ser usado para a cor verde
energizado por botão	Para ser usado para a cor amarela
botão-assertivo	Para ser usado para a cor vermelha
botão real	Para ser usado para a cor violeta
botão escuro	Para ser usado na cor preta

Contorno do botão

Se você quiser que seus botões sejam transparentes, você pode aplicar button-outlineclasse. Os botões com esta classe terão uma borda de contorno e um fundo transparente.

Para remover a borda do botão, você pode usar o button-clearclasse. O exemplo a seguir mostra como usar essas duas classes.

<button class = "button button-assertive button-outline">
   button-outline
</button>

<button class = "button button-assertive button-clear">
   button-clear
</button>

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

Adicionando ícones

Quando você deseja adicionar ícones aos seus botões, a melhor maneira é usar o iconclasse. Você pode colocar o ícone em um lado do botão usando oicon-left ou o icon-right. Normalmente, você desejará mover o ícone para um lado quando houver algum texto no topo do botão, conforme explicado abaixo.

<button class = "button icon ion-home">
</button>

<button class = "button icon icon-left ion-home">
   Home
</button>

<button class = "button icon icon-right ion-home">
   Home
</button>

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

Barra de Botões

Se você quiser agrupar alguns botões, pode usar o button-barclasse. Os botões terão o mesmo tamanho por padrão.

<div class = "button-bar">
   <a class = "button button-positive">1</a>
   <a class = "button button-assertive">2</a>
   <a class = "button button-energized">3</a>
   <a class = "button">4</a>
</div>

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