![[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
Curso básico sobre XAML para iniciantes
Share this on WhatsAppCurso básico sobre XAML Uma das grandes dificuldades para quem esta iniciando o processo de desenvolvimento de aplicações universais para Windows e Windows Phone, é a manipulação
Aprenda criar componentes no Ionic 4
Share this on WhatsAppFala galera!Hoje irei compartilhar com vocês uma dica muito útil que vai permitir que você evite de ficar replicando códigos no Ionic. Imagine um app que tenha
Curso Ionic em português – Aula 7 – Gerando nosso APK
Share this on WhatsAppVeja como geramos nosso apk para por o app no celular Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos realizar a
1 Comment
i9onvendas
julho 18, 08:20