[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:
1 |
ionic ionFab-label blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
1 |
cd ionFab-label |
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:
1 |
<ion-fab bottom right> |
Dentro desse fab, vamos criar um botão com ícone de compartilhamento:
1 |
<button ion-fab ><ion-icon name="md-share"></ion-icon></button> |
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:
1 |
<ion-fab-list side="top"> |
Agora enfim vamos adicionar os botões das redes sociais:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<button ion-fab [style.background-color]="color"> <ion-icon name="logo-facebook"></ion-icon> <div class="label">Facebook</div> </button> <button ion-fab [style.background-color]="color"> <ion-icon name="logo-instagram"></ion-icon> <div class="label"dir="rtl">Instagram</div> </button> <button ion-fab [style.background-color]="color"> <ion-icon name="logo-twitter"></ion-icon> <div class="label"dir="rtl">Twitter</div> </button> <button ion-fab [style.background-color]="color"> <ion-icon name="logo-whatsapp"></ion-icon> <div class="label"dir="rtl">Whattsapp</div> </button> |
Nosso arquivo deverá estar assim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ion-fab bottom right> <button ion-fab ><ion-icon name="md-share"></ion-icon></button> <ion-fab-list side="top"> <button ion-fab [style.background-color]="color"> <ion-icon name="logo-facebook"></ion-icon> <div class="label">Facebook</div> </button> <button ion-fab [style.background-color]="color"> <ion-icon name="logo-instagram"></ion-icon> <div class="label"dir="rtl">Instagram</div> </button> <button ion-fab [style.background-color]="color"> <ion-icon name="logo-twitter"></ion-icon> <div class="label"dir="rtl">Twitter</div> </button> <button ion-fab [style.background-color]="color"> <ion-icon name="logo-whatsapp"></ion-icon> <div class="label"dir="rtl">Whattsapp</div> </button> </ion-fab-list> </ion-fab> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.fab { contain: initial; box-shadow: 0px 3px 2px 2px black; } ion-fab { ion-fab-list button[ion-fab] { overflow: visible; div.label { position: absolute; right: 48px; background: rgba(0,0,0,0.7); height: 24px; line-height: 16px; padding-left: 8px; padding-right: 8px; padding-top: 5px; padding-bottom: 5px; border-radius: 3px; color: #fff; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1); } } } |
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
1 |
ionic serve -l |
ou
1 |
ionic cordova run android |
ou
1 |
ionic cordova run ios |
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!
About author
You might also like
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
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
Paulo Rogério
novembro 21, 14:13Junior Abranches
novembro 21, 14:30Felipe
agosto 05, 09:58