[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

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,

Mobile 5 Comments

[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

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