[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 5 Comments

[IONIC 3] – Criando elegante Slide-Show

Share this on WhatsAppFala pessoal, tudo bem com vocês? Na verdade essa dica de hoje fui um pedido de uma galera que viu em um Aplicativo meu e pediu para

Mobile 1Comments

Curso Ionic em português – Aula 5 – Salvando e obtendo dados do localStorage

Share this on WhatsAppVeja como salvar e obter dados do localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como salvar contatos no localStorage

Mobile 13 Comments

Curso grátis de Ionic em português

Share this on WhatsAppConfira uma série de vídeo aulas sobre Ionic Pessoal hoje venho trazer uma ótima notícia pra vocês, recebi um desafio de fazer um aplicativo em Ionic e

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