[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 19 posts

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

You might also like

Mobile 8 Comments

Criando Componente Accordion List com Ionic 3

Share this on WhatsAppOlá Galera.. tudo tranquilo? Sou novo por aqui e hoje vou trazer uma dica para deixar sua aplicação mobile um pouco mais intuitiva para o usuário, criando

Mobile 0 Comments

[IONIC 3] – Criando Transparent Header

Share this on WhatsAppOlá Pessoal, tudo bem com vocês? A dica de hoje é muito simples e fácil de ser implementado, porém dependendo da situação, seu projeto fica com uma

Mobile 0 Comments

Como criar animações em páginas web e aplicativos híbridos

Share this on WhatsAppAprenda criar animações em páginas web e aplicativos híbridos como ionic e phonegap Fala galera beleza? Bom espero que sim, hoje um amigo meu me perguntou como

3 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