Criando estiloso SearchBar com ViewChild
Olá pessoal, tudo tranquilo?
Bom, hoje mostrarei como adicionar um Search Bar em sua aplicação, mas não é qualquer Search Bar, vamos fazer ela aparecer e desaparecer ao clicar em um ion-fab, por exemplo, ficando mais ou menos assim:
Bacana? 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 start searchBar blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
1 |
cd searchBar |
2. Adicionando o SearchBar e o IonFab
Vamos alterar o nosso arquivo src/pages/home/home.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ion-header> <ion-navbar> <ion-title> Search Bar </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-searchbar #searchbar placeholder="o que deseja?" [hidden]="!<strong>search</strong>" (ionInput)="searchAction($event)"</ion-searchbar> <ion-fab right bottom (click)="toggleSearch()"> <button ion-fab class="pop-in"> <ion-icon name="search"></ion-icon> </button> </ion-fab> </ion-content> |
Aqui, adicionamos o ion-searchbar, e passamos o id #searchbar (iremos relacionar o id com o ViewChild posteriormente), a propriedade placeholder é para informar o usuário o que pesquisar ali, enquanto o componente estiver vazio. Para criar o efeito de ficar visível/invisível, criamos uma variável search e a usamos na propriedade [hidden].
Em (ionInput)=”searchAction($event)”, será o evento onde de fato irá implementar a nossa busca, a partir daí, é com você adequar ao seu projeto 🙂
O Componente ion-fab que irá manipular o quando o search bar irá ficar visível/invisível.
3. Fazendo acontecer
Já configuramos nossta tela, então vamos para a lógica na utilização do search bar.
Para isso, vamos alterar o arquivo: src/pages/home/home.ts:
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 27 28 |
import { Component, ViewChild, ElementRef, Renderer } from '@angular/core'; import { NavController, Searchbar } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { @ViewChild('searchbar', { read: ElementRef }) searchbarRef: ElementRef; @ViewChild('searchbar') searchbarElement: Searchbar; search: boolean = false; constructor(public navCtrl: NavController) {} toggleSearch() { if (this.search) { this.search = false; } else { this.search = true; this.searchbarElement.setFocus(); } } searchAction(texto: any) { let val = texto.target.value; //implement search } } |
Criamos o ViewChild que é um componente filho, que pode ser acessado pelo componente pai.
Além disso, criamos uma variável booleana search com valor default = false. Como já definimos, o componente ficará visível/invisível a partir da mudança dessa variável, como esta default FALSE, em nossa view, o search bar ficará invisível.
Agora é simples, como definimos, o ion-fab que irá definir a visibilidade do search bar, portanto criamos o evento do click em toggleSearch, onde simplesmente seta a variável search para true ou false, dependendo do seu estado, fazendo o efeito esse efeito no search bar.
Em searchAction é onde vocês irão aplicar a busca de acordo com a necessidade do seu projeto.
4. IonFab
Para deixar mais elegante, vamos adicionar no arquivo src/pages/home/home.scss, o seguinte:
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
page-home { .fab{ background-color: rgba(0, 0, 0, 0.5); } // POP-IN (FLOAT ACTION BUTTON EFFECT) ------------- .pop-in { animation: pop-in 0.65s; } @keyframes pop-in { 0% { transform: scale(0); } 45% { transform: scale(0); } 90% { transform: scale(1.15); } 100% { transform: scale(1); } } // POP-OUT (FLOAT ACTION BUTTON EFFECT) ------------- .pop-out { animation: pop-out 2.5s forwards; } @keyframes pop-out { 0% { transform: scale(1); } 15% { transform: scale(0); } 100% { transform: scale(0); } } } |
Assim, o ion-fab terá um efeito bacana ao abrir a aplicação, perceba como ficou.
Bom, é isso, a partir daí, a implementação para utilizar o search bar é com vocês.
Para executar no navegador, executamos o comando:
1 |
ionic serve -l |
Espero que tenham gostado e que possam utilizar nos projetos de vocês daqui pra frente.
O Código fonte para tudo isso que fizemos, encontra-se aqui.
Valeu galera, até mais!!
About author
You might also like
Live 04 – Ionic Framework 5 + Capacitor + Web + Desktop e Mobile
Share this on WhatsAppFala Dev!Resolvi criar uma live no dia 05/maio as 21:30h para batermos um papo sobre o Ionic Framework 5 e entendermos a importância e as vantagens de
Participe – Maratona Xamarin gratuita e com certificado da Microsoft
Share this on WhatsAppMicrosoft Brasil cria maratona Xamarin e da certificado No dia 30 de janeiro de 2017 a Microsoft Brasil irá realizar uma Maratona Xamarin com direito a certificado.
Curso completo e grátis de Ionic 2 em português
Share this on WhatsAppVeja como aprender Ionic 2 Hoje trago uma notícia que irá interessar muita gente, fechei uma parceria com um desenvolvedor de Ionic 1 e Ionic 2 e
0 Comments
No Comments Yet!
You can be first to comment this post!