Criando Horizontal Scrolling

Criando Horizontal Scrolling

Fala galera, tranquilo?

Vou mostrar aqui mais uma dica para embelezar os projetos e aplicativos de vocês, utilizando um horizontal scrolling.

Bora 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. Preparando o array

A idéia é apresentar alguns registros em um horizontal scrolling, então, vamos criar um array com título e uma imagem.

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

Bom, é simples, criamos um array chamado categorias e definimos conteúdo para ele, dessa forma, em nossa view, vamos iterar sobre o array e demonstrá-lo em um horizontal scrolling.

3. Iterando e lendo os registros do array

Após criarmos o array, iremos ler os registros iterando sobre ele e demonstrar na tela, ok?

Para isso, vamos alterar o arquivo: src/pages/home/home.html:

Criamos uma div com a classe “listaCategorias”, vamos aplicar o css em cima dessa classe posteriormente.

Também temos o ion-chip, o escolhi pois ficará bacana demonstrar um horizontal scrolling em cima dele.

Para demonstrarmos todos os registros do nosso array categorias, utilizamos o *ngFor, vamos percorrer o array, registro a registro.

ion-avatar vamos demonstrar a imagem e uma label para o título das nossas categorias, ok?

Conseguimos ler os dados do array e demonstrá-los, certo?

Mas isso não é o suficiente, vamos executar e ver como esta no browser.

Para executar no navegador, executamos o comando:

Você deverá ter algo parecido com isso:

Com certeza, não é o que queremos.

4. Aplicar o horizontal-scrolling

Vamos então, deixar nossa aplicação elegante com um horizontal scrolling para demonstrar esses registros.

Para isso, temos que alterar o arquivo src/pages/home/home.scss

Repare que utilizamos a class listaCategorias definida na div no html, lembra?

Vamos definir o overflow: auto, display: flex e color: #000.

Para deixar mais bonito, vamos aplicar uma borda, definir margem, cor e estilo da letra no ion-chip.

Volte ao navegador e veja o resultado:

 

É isso pessoal.

Daqui pra frente, espero que possam utilizar e deixar a aplicação mais elegante para o usuário.

O Código fonte para tudo isso que fizemos, encontra-se aqui.

Valeu, até mais!

Previous Criando estiloso SearchBar com ViewChild
Next Como testar seu código sem rodar a aplicação no visual studio

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

Participe – Maratona Xamarin gratuita e com certificado da Microsoft

Share this on WhatsAppMicrosoft Brasil cria maratona Xamarin e da certificado No dia 30 de janeiro de 2017 a Microsoft Brasil irá realizar uma Maratona Xamarin com direito a certificado.

Mobile 0 Comments

Criando estiloso SearchBar com ViewChild

Share this on WhatsAppOlá 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

Mobile 2 Comments

Criando um background com slides em aplicações mobile com Ionic

Share this on WhatsAppOlá Galera.. como estão? Hoje vamos construir um belo background com slides para ser usado tanto em aplicações mobile com Ionic. O conceito servirá também para outras

1 Comment

Leave a Reply