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

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

You might also like

Mobile 4 Comments

Validando dados com a classe ArgumentValidator no C#

Share this on WhatsAppConheça a classe ArgumentsValidator E ai pessoal beleza? Hoje gostaria de compartilhar com vocês uma classe que eu criei que nos auxilia na validação de dados. Há

O que é Npm, Bower, Gulp, Nuget, TypeScript e Sass?

Share this on WhatsAppVeja o que é e para que serve essas novas ferramentas! Venho hoje através deste post esclarecer o que é e para que serve as ferramentas Npm,

Mobile 4 Comments

Curso completo de Xamarim Forms em português

Share this on WhatsAppConheça tudo sobre o Xamarim Forms Já falei aqui no blog sobre a diferença entre aplicações nativas e híbridas, e que aplicações nativas tem um desempenho muito

1 Comment

Leave a Reply