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:

Uma vez criado, vamos entrar no diretório do Projeto, executando:

2. Adicionando o SearchBar e o IonFab

Vamos alterar o nosso arquivo src/pages/home/home.html

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:

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:

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:

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!!