![[IONIC 3] – Selecionar items com ion-Slide e ion-Chip](https://ilovecode.com.br/wp-content/uploads/2017/11/Capturar.png)
[IONIC 3] – Selecionar items com ion-Slide e ion-Chip
Olá galera, tudo bem com vocês?
Hoje vou mostrar aqui, como utilizar o componente ion-slide e ion-chip, e manipular componente em tempo de execução, utilizando também o ViewChild.
Vai ficar bem legal, e a partir deste tutorial, pode ser implementado no projeto de vocês de diversas maneiras…
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 ionChip blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
|
1 |
cd ionChip |
2. Preparando o ion-Slide e Criando Métodos
Podemos modificar o arquivo src/pages/home/home.ts:
Agora vamos criar um array denominado allCurrencies e definir um nome (name) e uma cor (color) como propriedades de cada objeto do array
|
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 |
allCurrencies = [{ name: 'Real', color: '#6064FC' }, { name: 'Bitcoin', color: '#99D6D9' }, { name: 'Litecoin', color: '#A5A3DD' },{ name: 'Ethereum', color: '#4F99F0' }, { name: 'Monero', color: '#f8ab02' }, { name: 'Dash', color: '#ff1616' }, { name: 'MartexCoin', color: '#16ff89' }, { name: 'Prosper', color: '#b016ff' },{ name: 'SingularDTV', color: '#FF640C' }]; |
Criaremos também mais um array (selectedCurrencies) este será vazio.
|
1 |
selectedCurrencies = []; |
Agora vamos definir 2 métodos, um para adicionar (addCurrencie) as moedas (currencies) do ion-Slide para um ion-Chip e outro para remover (deleteCurrencie) a moeda do ion-Chip:
|
1 2 3 4 5 6 7 8 9 |
addCurrencie(currencie){ if(this.selectedCurrencies.indexOf(currencie) === -1){ this.selectedCurrencies.push(currencie); } } deleteCurrencie(currencie) { this.selectedCurrencies.splice(this.selectedCurrencies.indexOf(currencie),1); } |
Nosso arquivo src/pages/home/home.ts deverá estar assim:
|
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 |
import { NavController, Slides, Platform } from 'ionic-angular'; import { Component, ViewChild, ElementRef, Renderer } from '@angular/core'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { allCurrencies = [{ name: 'Real', color: '#6064FC' }, { name: 'Bitcoin', color: '#99D6D9' }, { name: 'Litecoin', color: '#A5A3DD' },{ name: 'Ethereum', color: '#4F99F0' }, { name: 'Monero', color: '#f8ab02' }, { name: 'Dash', color: '#ff1616' }, { name: 'MartexCoin', color: '#16ff89' }, { name: 'Prosper', color: '#b016ff' },{ name: 'SingularDTV', color: '#FF640C' }]; selectedCurrencies = []; constructor(public navCtrl: NavController, public platform: Platform) {} addCurrencie(currencie){ if(this.selectedCurrencies.indexOf(currencie) === -1){ this.selectedCurrencies.push(currencie); } } deleteCurrencie(currencie) { this.selectedCurrencies.splice(this.selectedCurrencies.indexOf(currencie),1); } } |
3. Criar a dinâmica do Slide e Chip na View
Agora vamos para o arquivo src/pages/home/home.html e visualizar as nossas moedas através de ion-Slide e criar a dinâmica de adicionar ou removê-las através de ion-Chip
Nosso arquivo deverá estar assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ion-content class="primary-font" fullscreen > <div padding class="selected-topics"> <ion-chip *ngFor="let topic of selectedCurrencies"> <ion-label>{{ topic }}</ion-label> <button ion-button clear (click)="deleteCurrencie(topic)"> <ion-icon name="close-circle"></ion-icon> </button> </ion-chip> </div> <ion-slides padding paginationType autoplay="3000" loop spaceBetween="10" slidesPerView="3" style="height: 20vh"> <ion-slide *ngFor="let topic of allCurrencies" style="border-radius: 5px" [ngStyle]="{'background': 'linear-gradient(283deg, #CFD4DE, '+topic.color+')'}" (click)="addCurrencie(topic.name)"> <hr margin> <span class="white">{{ topic.name }}</span> </ion-slide> </ion-slides> </ion-content> |
No primeiro bloco, criamos ion-chip e fazemos a iteração no array selectedCurrencies, este array é alterado toda vez que adicionamos ou removemos as moedas nos métodos addCurrencie e deleteCurrencie.
Ao clicar em cada ion-chip, chamamos o método deleteCurrencie, passando como parâmetro, a nossa moeda.
No segundo bloco foi criado o ion-slides e cada ion-slide será visualizado as nossa moedas, pois também fizemos iteração, desta vez no array allCurrencies, que definimos nomes e cores para em seus objetos.
Ao clicar em cada ion-slide, nós chamamos o método addCurrencie para adicionar a moeda e passar para o ion-chip.
O código abaixo é para estilizar um pouco a aplicação, vamos alterar o arquivo src/pages/home/home.scss:
|
1 2 3 4 5 6 7 8 9 10 |
page-home { .selected-topics { overflow: auto; display: flex; } hr { background-color: white !important; } } |
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:
A dica de hoje foi bem simples, porém bastante útil dependendo das aplicações…
Espero 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
Push notifications no Android com Ionic 5 e Firebase
Share this on WhatsAppFala Dev!Hoje resolvi trazer um artigo que pode ajudar muita gente que trabalha desenvolvendo aplicativos e sites e deseja utilizar push notification em seu projeto. O que
Ionic 3 X Ionic 4, o que vem por ai?
Share this on WhatsAppFala galera, sei que ando sumido, mas hoje trago uma novidade bem interessante para vocês. Irei falar um pouco das diferenças do Ionic 3 para Ionic 4, irei apresentar
![[IONIC 3] – Zoom em Imagem](https://ilovecode.com.br/wp-content/uploads/2017/10/img-500x500_c.png)
[IONIC 3] – Zoom em Imagem
Share this on WhatsAppOlá pessoal, tudo bem? A dica de hoje é bem simples e útil, vamos aprender facilmente a dar zoom em imagens com Ionic, ok? Bora lá? 1. Criar o
1 Comment
i9onvendas
julho 18, 08:20