![[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
Conheça alguns atalhos do Visual Studio que irão agilizar seu dia!
Share this on WhatsAppConheça agora atalhos interessantes para usar no Visual Studio Sabemos que o mouse facilita muito o nosso dia a dia, com ele clicamos em menus, arrastamos documentos,
![[IONIC 3] – Criando elegante Slide-Show](https://ilovecode.com.br/wp-content/uploads/2017/10/1-500x500_c.png)
[IONIC 3] – Criando elegante Slide-Show
Share this on WhatsAppFala 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
Curso grátis de Ionic em português
Share this on WhatsAppConfira uma série de vídeo aulas sobre Ionic Pessoal hoje venho trazer uma ótima notícia pra vocês, recebi um desafio de fazer um aplicativo em Ionic e
1 Comment
i9onvendas
julho 18, 08:20