[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 17 posts

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

You might also like

Mobile 2 Comments

[IONIC] – IonFab com Button e Label

Share this on WhatsAppOlá galera, tranquilo? A dica de hoje é também muito simples. Porém dá um certo estilo e agradabilidade para o usuário ao utilizar. Será um utilizando componente

Mobile 0 Comments

Curso Ionic em português – Aula 4 – Importando projeto do Ionic Creator

Share this on WhatsAppImportando dados do Ionic Creator Pessoal, continuando com nossa série de vídeo aulas, hoje trago pra vocês dicas de como importar o projeto criado no Ionic Creator

Mobile 0 Comments

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

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply