[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 4 Comments

Curso completo de Xamarim Forms em português

Share this on WhatsAppConheça tudo sobre o Xamarim Forms Já falei aqui no blog sobre a diferença entre aplicações nativas e híbridas, e que aplicações nativas tem um desempenho muito

Validando dados com a classe ArgumentValidator no C#

Share this on WhatsAppConheça a classe ArgumentsValidator E ai pessoal beleza? Hoje gostaria de compartilhar com vocês uma classe que eu criei que nos auxilia na validação de dados. Há

Mobile 13 Comments

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

  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