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
Curso Ionic em português – Aula 8 – Adicionando tela de aguarde!
Share this on WhatsAppExiba tela de aguarde quando estiver processando algo Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos abrir uma tela de aguarde
Curso Ionic em português – Aula 4 – Importando projeto do Ionic Creator
Share this on WhatsAppImportando dados do Ionic Creator Pessoal, continuando com nossa série de vídeo aulas, hoje trago pra vocês dicas de como importar o projeto criado no Ionic Creator
Como resolver o erro WKWebView – ITMS-90809: Deprecated API Usage
Share this on WhatsAppFala Dev!ultimamente tenho recebido muitas perguntas de como resolver o erro apresentado pela Apple ao subir aplicações híbridas antigas. Se você tem uma aplicação híbrida antiga, seja
1 Comment
paulorogerio
setembro 26, 13:23