[IONIC 3] – Criando elegante Slide-Show
Fala pessoal, tudo bem com vocês?
Na verdade essa dica de hoje fui um pedido de uma galera que viu em um Aplicativo meu e pediu para eu postar como fazer, é uma exibição elegante e clean com Slides.
** Lembrando que a intenção desse post não é divulgar absolutamente nada e as imagens são ilustrativas.
Vamos lá, então..
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 beautifulSlide blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
1 |
cd beautifulSlide |
2. Criando os dados do Slide
A primeira coisa que devemos fazer, é criar os dados para exibição do nosso slide, como esse é um exemplo retirado de um aplicativo que eu desenvolvi sobre Futebol, vou seguir a mesma característica.
Para isso, devemos alterar o 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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import { Component, ViewChild } from '@angular/core'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { @ViewChild('mySlider') mySlider: any; elenco = [ { "img": "https://flamidia.blob.core.windows.net/site/upload/perfil/20170720164222_708.jpg", "posicao": "Goleiro ", "nome": "Diego Alves", "camisa": "1" }, { "img": "https://flamidia.blob.core.windows.net/site/upload/perfil/20170510134436_380.jpg", "posicao": "Zagueiro ", "nome": "Juan", "camisa": "4" }, { "img": "https://flamidia.blob.core.windows.net/site/upload/perfil/20170510133137_26.jpg", "posicao": "Volante ", "nome": "Cuellar", "camisa": "26" }, { "img": "https://flamidia.blob.core.windows.net/site/upload/perfil/20170510133212_528.jpg", "posicao": "Meio Campo ", "nome": "Diego", "camisa": "35" }, { "img": "https://flamidia.blob.core.windows.net/site/upload/perfil/20170613121523_173.jpg", "posicao": "Meio Campo ", "nome": "Éverton Ribeiro", "camisa": "7" }, { "img": "https://flamidia.blob.core.windows.net/site/upload/perfil/20170510133631_285.jpg", "posicao": "Atacante ", "nome": "Paolo Guerrero", "camisa": "9" } ] constructor(){} slideNext(){ this.mySlider.slideNext(); } slidePrev(){ this.mySlider.slidePrev(); } } |
Aqui nós definimos uma variável do tipo any = [] (array) e o alimentamos com algumas informações. Estas, serão exibidas em nosso slide posteriormente.
Também temos um ViewChild que é um componente filho que pode ser acessado pelo componente pai, nesse caso o denominamos como mySlider.
E mais dois métodos (slideNext e slidePrev) que serão utilizados para passar um slide à frente, ou retroceder um slide.
3. Criando o Slide na View
Já temos os dados prontos, agora 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 21 22 23 |
<ion-content> <ion-slides paginationClickable=true initialSlide=0 loop=true autoplay=1000 speed=2000 #mySlider> <ion-slide *ngFor="let item of elenco"> <ion-item class="itemPosicao" color="dark"> {{item.posicao}} </ion-item> <img src="{{item.img}}"> <ion-item color="primary"> {{item.camisa}} | {{item.nome}} </ion-item> </ion-slide> </ion-slides> <div class="swiper-button-next" (click)="slideNext()"></div> <div class="swiper-button-prev" (click)="slidePrev()"></div> </ion-content> |
Dentro do nosso Content, criamos o ion-slides que seria um container com várias seções, essas seções podem ser arrastadas ou deslizadas entre si.
Definimos algumas propriedades como:
paginationClickable > permiti o click em cada paginação do slide;
initialSlide > o index do slide inicial;
loop > caso true, ao terminar a transição dos slides, este voltará ao início;
autoplay > o atraso da transição entre os slides (em milissegundos);
speed > a duração das transições (em milissegundos).
Fizemos o relacionamento com o ViewChild denominado #mySlider.
Dentro do ion-slides, criamos o ion-slide, que é de fato cada slide do nosso container de slides (seria cada objeto criado no nosso array) pois nós definimos uma iteração chamando item (*ngFor=”let item of elenco”).
Dessa forma, cada elemento do nosso array, será demonstrado em forma de slide.
Dentro do ion-slide, colocamos alguns componentes básicos como ion-item e img (o layout fica a seu critério).
Posteriormente, criamos 2 divs, ambas com funções de transição entre os slides, passando para frente, ou retrocedendo. Pois definimos no click de cada uma, os métodos criados anteriormente ( (click)=”slideNext()” e (click)=”slidePrev()” ).
Para centralizar o texto, utilizamos a classe “”
1 2 3 |
<ion-item class="itemPosicao" color="dark"> {{item.posicao}} </ion-item> |
E no arquivo src/pages/home/home.scss, definimos:
1 2 3 |
.itemPosicao { text-align: center; } |
4. Executando o projeto
Feito isso, já temos uma transição bacana entre slides, para vermos o resultado, vamos digitar:
1 |
ionic serve -l |
ou
1 |
ionic cordova run android |
ou
1 |
ionic cordova run ios |
e deveremos ter algo semelhante à isso:
Bom, é isso galera…
Espero que a dica tenha sido útil à vocês, e que possam utilizá-la daqui pra frente..
O Código fonte para tudo isso que fizemos, encontra-se aqui.
Valeu, até mais!
About author
You might also like
Bomba! Xamarin agora permite desenvolver para iOS sem mesmo ter um Mac!
Share this on WhatsAppO Xamarin Live permite aos desenvolvedores implantar, testar e depurar seus aplicativos diretamente em dispositivos iOS e Android. Para isso basta instalar o aplicativo Xamarin Live Player
Implementando Push Notification no Xamarin Forms
Share this on WhatsAppVeja como implementar Push Notification no Xamarin Forms Fala pessoal beleza? Bom espero que sim! Hoje venho trazer um vídeo para vocês de como implementar o recurso
Curso Ionic em português – Aula 6 – Excluindo e pesquisando dados
Share this on WhatsAppVeja como excluír e pesquisar dados na localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como excluír dados na localStorage,
5 Comments
hiarly
julho 02, 16:05Junior Abranches
julho 03, 09:21LucianaElisa
setembro 04, 18:37Marcus Maia
novembro 21, 22:45karanalpe
março 31, 18:07