Criando estiloso SearchBar com ViewChild

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

Previous Criando um background com slides em aplicações mobile com Ionic
Next Criando Horizontal Scrolling

About author

Junior Abranches
Junior Abranches 4 posts

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

You might also like

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,

Mobile 0 Comments

Curso Ionic em português – Aula 11 – Melhorando performance com Cache

Share this on WhatsAppAprenda como melhorar a performance de seu aplicativo Pessoal, continuando com nossa série de vídeo aulas, hoje iremos utilizar uma técnica que irá melhorar e muito a

Mobile 0 Comments

Como criar animações em páginas web e aplicativos híbridos

Share this on WhatsAppAprenda criar animações em páginas web e aplicativos híbridos como ionic e phonegap Fala galera beleza? Bom espero que sim, hoje um amigo meu me perguntou como

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply