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

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

You might also like

Mobile 0 Comments

Curso criando aplicativo Uber com Ionic 2

Share this on WhatsAppAprenda criar um aplicativo igual do Uber com Ionic 2 Fala galera, um tempo atrás um sujeito chegou até a mim e me pediu para criar um

Visual Studio 1Comments

Lista de dicas e cursos gratuitos em português

Share this on WhatsAppResumão de todos os cursos que passaram pelo site Hoje resolvi trazer um resumo de todos os cursos, treinamentos, vídeo aulas que foram divulgados aqui no site

Mobile 0 Comments

Curso Ionic em português – Aula 6 – Excluindo e pesquisando dados

Share this on WhatsAppVeja como excluír e pesquisar dados na localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como excluír dados na localStorage,

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