[IONIC] – IonFab com Button e Label

Olá galera, tranquilo?

A dica de hoje é também muito simples. Porém dá um certo estilo e agradabilidade para o usuário ao utilizar.

Será um utilizando componente ion-fab, criando um fab-list com botões com ícones e labels.

A partir deste tutorial, você pode criar nas suas aplicações e adequar de acordo com a necessidade de cada uma, deixando muito mais dinâmico e interessante para o usuário.

Vamos lá?!

1. Criar o projeto Ionic

Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:

Uma vez criado, vamos entrar no diretório do Projeto, executando:

2. Criando o Componente

Vamos começar, criando o componente, para esse exemplo vamos utilizar um botão de compartilhamento que irá abrir as redes sociais pré definidas.

Para isso, vamos alterar o arquivo src/pages/home/home.html:

Nesse trecho (abaixo), criamos o ion-fab no canto inferior direito da tela:

Dentro desse fab, vamos criar um botão com ícone de compartilhamento:

A idéia é que ao clicar no botão de compartilhamento, uma lista de outros botões apareça com as redes sociais, então vamos criar um fab-list onde os botões irão no sentido ao topo da tela:

Agora enfim vamos adicionar os botões das redes sociais:

Nosso arquivo deverá estar assim:

3. Estilizando o Componente

Agora que já temos nosso componente criado, vamos estilizá-lo e deixar mais usual e elegante para o usuário, mostrando o nome da ação de cada botão:

Para isso, vamos alterar o arquivo src/pages/home/home.scss:

Aqui criamos uma borda com sombra no componente, definimos também cor do fundo do texto, a cor do texto, o direcionamento e a sombra para cada botão.

Esse arquivo fica livre para você configurar de forma adequada ao seu projeto.

4. Executando o projeto

Pronto!!

Vamos ver o resultado, então digite o comando

ou

ou

e deveremos ter algo semelhante à isso:

Espero que possam utilizar daqui pra frente nos projetos de vocês essa dica bem legal.

Caso tenham gostado, compartilhe com os amigos, e se houver dúvidas podem comentar, que o mais breve possível eu respondo!!

O Código fonte para tudo isso que fizemos, encontra-se aqui.

Valeu, até mais!