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 19 posts

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

You might also like

Mobile 5 Comments

[IONIC] – Criação e Validação de Forms com FormBuilder e Validators

Share this on WhatsAppOlá galera, tudo bem com vocês? A dica de hoje é bastante útil em qualquer aplicação, vou ensinar a vocês como utilizar facilmente o FormBuilder e o

Mobile 0 Comments

COMO fazer CRUD em C# com LiteDB (Embedded NoSQL)

Share this on WhatsAppFala Dev! Hoje resolvi trazer um vídeo mostrando como podemos realizar um CRUD utilizando um banco de dados que é orientado a documentos e funciona de forma

Mobile 6 Comments

Aplicativos e Desenvolvimento Mobile Híbrido X Nativo

Share this on WhatsAppOlá Pessoal, tudo bem com vocês? Nesse artigo , busco apresentar que são as apps híbridas, quais as vantagens e desvantagens que elas possuem em relação as

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply