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

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

You might also like

Qual o melhor framework html5?

Share this on WhatsAppConstrua sites com componentes e funcionalidades mais ricas No poste de hoje venho abordar um assunto que vem atraindo cada vez mais a atenção dos desenvolvedores front-end

Como criar animações em páginas web e aplicativos híbridos

Share this on WhatsAppAprenda criar animações em páginas web e aplicativos híbridos como ionic e phonegap Fala galera beleza? Bom espero que sim, hoje um amigo meu me perguntou como

Mobile 0 Comments

Criando estiloso SearchBar com ViewChild

Share this on WhatsAppOlá pessoal, tudo tranquilo? Bom, hoje mostrarei como adicionar um Search Bar em sua aplicação, mas não é qualquer Search Bar, vamos fazer ela aparecer e desaparecer ao

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply