[IONIC 3] – Selecionar items com ion-Slide e ion-Chip

[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:

Uma vez criado, vamos entrar no diretório do Projeto, executando:

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

Criaremos também mais um array (selectedCurrencies) este será vazio.

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:

Nosso arquivo src/pages/home/home.ts deverá estar assim:

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:

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:

4. Executando o projeto

Feito isso, já temos uma transição bacana entre slides, para vermos o resultado, vamos digitar:

ou

ou

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!

Previous [IONIC 3] - Criando Transparent Header
Next [IONIC] - Criação e Validação de Forms com FormBuilder e Validators

About author

Junior Abranches
Junior Abranches 19 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Mobile 2 Comments

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

Mobile 5 Comments

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

Mobile 8 Comments

[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

  1. i9onvendas
    julho 18, 08:20 Reply
    Olá amigo, sabe me dizer se tem como usar o slide como troca de pagina, por exemplo estou em uma page "deslizo" para o lado e ele vai para a pagina 2 "deslizo" e vai para a pagina 3. tenho apenas 3 paginas e gostaria de trabalhar dessa forma, ou se souber de outro forma mais adequada de fazer isso, te agradeço. Te acompanho no face e no youtube, show de bola seu trabalho. Abraço

Leave a Reply