[IONIC] – IonFab com Button e Label

[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!

Previous Balta.io - BlackWeek 2017
Next Aplicativos e Desenvolvimento Mobile Híbrido X Nativo

About author

Junior Abranches
Junior Abranches 16 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Mobile 0 Comments

Participe – Maratona Xamarin gratuita e com certificado da Microsoft

Share this on WhatsAppMicrosoft Brasil cria maratona Xamarin e da certificado No dia 30 de janeiro de 2017 a Microsoft Brasil irá realizar uma Maratona Xamarin com direito a certificado.

Mobile 0 Comments

Aplicativos e Desenvolvimento Mobile Híbrido X Nativo

Share this on WhatsAppOlá Pessoal, tudo bem com vocês? Nesse artigo , busco apresentar que são as apps híbridas, quais as vantagens e desvantagens que elas possuem em relação as

Mobile 0 Comments

Curso gratuito de Ionic 1 em português

Share this on WhatsAppComo aprender Ionic 1 Sabemos que o desenvolvimento para dispositivos móveis está em alta e podemos ganhar um bom dinheiro trabalhando de casa. Existem diversas formas de

2 Comments

  1. Paulo Rogério
    novembro 21, 14:13 Reply
    Muito bom, esse é um dos problemas que muita gente passa no Ionic. As vezes somente o ícone não é o suficiente!
    • Junior Abranches
      novembro 21, 14:30 Reply
      Sim. As vezes o usuário não sabe realmente o que o botão faz somente com ícone.

Leave a Reply