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

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

You might also like

Visual Studio 0 Comments

Conheça alguns atalhos do Visual Studio que irão agilizar seu dia!

Share this on WhatsAppConheça agora atalhos interessantes para usar no Visual Studio Sabemos que o mouse facilita muito o nosso dia a dia, com ele clicamos em menus, arrastamos documentos,

Mobile 0 Comments

Xamarin Forms – Data Binding entre controles

Share this on WhatsAppAprenda fazer Data Binding entre seus componentes de sua View no Xamarin Forms Fala galera, beleza? Como alguns de vocês já sabem, depois de passar um tempo

Mobile 0 Comments

Curso Ionic em português – Aula 12 – Animando nosso aplicativo

Share this on WhatsAppDeixe seu aplicativo mais interativo através de animações Pessoal, continuando com nossa série de vídeo aulas, hoje iremos utilizar uma técnica que irá deixar nosso aplicativo mais

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply