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

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

You might also like

FrontEnd 0 Comments

Qual o melhor framework html5?

Share this on WhatsAppConstrua sites com componentes e funcionalidades mais ricas No poste de hoje venho abordar um assunto que vem atraindo cada vez mais a atenção dos desenvolvedores front-end

Mobile 0 Comments

[IONIC 3] – Criando Transparent Header

Share this on WhatsAppOlá Pessoal, tudo bem com vocês? A dica de hoje é muito simples e fácil de ser implementado, porém dependendo da situação, seu projeto fica com uma

Outros 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á

1 Comment

Leave a Reply