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:
|
1 |
ionic start horizontal-scrolling blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
|
1 |
cd horizontal-scrolling |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { categorias = [{ title: 'Teste', thumb: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQr4vDtrS1JJjSXbiTbAgd9IkZuYVHj0bv44NLmwMVFB9aI8NmqYw' },{ title: 'Teste1', thumb: 'https://abrilveja.files.wordpress.com/2016/05/alx_mundo-cidades-japao-osaka-20140711-001_original1.jpeg?quality=70&strip=info&w=817' },{ title: 'Teste2', thumb: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4-HmeBXVv9_UityqKl01AeKHtA7fawrd1L8Mf_zauFQ6IomzT' },{ title: 'Teste3', thumb: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKtAC5wCFSorttbGSxhHSfv1u1ra_dsIrPaxDxLk62SBO2nwQx' },{ title: 'Teste4', thumb: 'https://abrilveja.files.wordpress.com/2016/05/alx_mundo-cidades-japao-osaka-20140711-001_original1.jpeg?quality=70&strip=info&w=817' },{ title: 'Teste5', thumb: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQr4vDtrS1JJjSXbiTbAgd9IkZuYVHj0bv44NLmwMVFB9aI8NmqYw' },{ title: 'Teste6', thumb: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4-HmeBXVv9_UityqKl01AeKHtA7fawrd1L8Mf_zauFQ6IomzT' }] constructor(public navCtrl: NavController) {} loadData(categoria){ alert(categoria.title); } } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <div padding class="listaCategorias"> <ion-chip *ngFor="let cat of categorias" (click)="loadData(cat)" > <ion-avatar> <img [src]="cat.thumb"> </ion-avatar> <ion-label color="dark">{{ cat.title }}</ion-label> </ion-chip> </div> </ion-content> |
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.
O 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:
|
1 |
ionic serve -l |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
page-home { .listaCategorias { overflow: auto; display: flex; color: #000 } ion-chip { margin: 5px !important; border: 1px solid rgba(56, 245, 239, 0.74);; color: white !important; font-weight: bold !important; .button { color: rgba(56, 245, 239, 0.74); } } } |
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!
About author
You might also like
Qual o melhor aplicativo híbrido ou nativo?
Share this on WhatsAppApps híbridos X nativo Pessoal, venho tentar resolver neste post uma dúvida muito comum para quem quer se aventurar na área de desenvolvimento mobile. Muitas pessoas se
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.
Curso grátis – Criando aplicativos robustos com Ionic
Share this on WhatsAppFala galera, tudo na paz? Hoje venho anunciar mais um curso disponibilizado na Udemy! Desta vez o curso se chama Criando aplicativos robustos com Ionic! Como de
1 Comment
paulorogerio
setembro 26, 13:23