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

Bomba! Xamarin agora permite desenvolver para iOS sem mesmo ter um Mac!

Share this on WhatsAppO Xamarin Live permite aos desenvolvedores implantar, testar e depurar seus aplicativos diretamente em dispositivos iOS e Android. Para isso basta instalar o aplicativo Xamarin Live Player

Mobile 0 Comments

Curso Grátis – Iniciando com Ionic

Share this on WhatsAppFala galera, tudo bem por aí? Temos uma boa novidade.. Agora, além de artigos e tutoriais publicados por aqui, criei um canal no Youtube sobre o desenvolvimento

Xamarin Forms – Data Binding entre controles

Share this on WhatsAppAprenda fazer Data Binding entre seus componentes de sua View no Xamarin Forms Fala galera, beleza? Como alguns de vocês já sabem, depois de passar um tempo

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