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 16 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 7 – Gerando nosso APK

Share this on WhatsAppVeja como geramos nosso apk para por o app no celular Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos realizar a

Mobile 0 Comments

Curso Ionic em português – Aula 8 – Adicionando tela de aguarde!

Share this on WhatsAppExiba tela de aguarde quando estiver processando algo Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos abrir uma tela de aguarde

Mobile 1Comments

Criando Componente Accordion List com Ionic 3

Share this on WhatsAppOlá Galera.. tudo tranquilo? Sou novo por aqui e hoje vou trazer uma dica para deixar sua aplicação mobile um pouco mais intuitiva para o usuário, criando

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply