Criando Componente Accordion List com Ionic 3
Olá Galera.. tudo tranquilo?
Sou novo por aqui e hoje vou trazer uma dica para deixar sua aplicação mobile um pouco mais intuitiva para o usuário, criando um componente, o Accordion List..
Veja abaixo o que iremos fazer:
Legal né, vamos lá?
1. Criar o projeto Ionic
Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:
1 |
ionic start ionic-expandable-list blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
1 |
cd ionic-expandable-list |
Agora, criaremos o componente, chamando-o de Expandable, então também geraremos isso agora:
1 |
ionic g component Expandable |
Este comando também configurará automaticamente o componente no arquivo app.module.ts.
2. Construindo o componente Expandable
Vamos ao arquivo src/components/expandable/expandable.html e criar o componente, assim:
1 2 3 |
<div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded"> <ng-content></ng-content> </div> |
O modelo para o componente é razoavelmente simples. Estamos usando a projeção de conteúdo para mostrar o que adicionamos dentro das tags ao modelo do componente. Isso significa que podemos exibir algum conteúdo aqui dentro do nosso componente.
Aqui também temos um invólucro que possui uma variável de modelo do expandWrapper para que possamos acessá-lo mais tarde, e a classe colapsada está sendo aplicada condicionalmente com base no valor expandido. É assim que vamos alternar o estilo recolhido para fazer o efeito de Accordion.
Para isso, vamos modificar o arquivo: src/components/expandable/expandable.scss
1 2 3 4 5 6 7 8 9 10 11 |
expandable { .expand-wrapper { transition: 0.2s linear; } .collapsed { height: 0 !important; } } |
Quando a classe colapsada for aplicada, forçará a altura do invólucro a ser 0 (zero), então ele deve desaparecer, e também vamos adicionar uma propriedade de transição para que o componente encolhe ou cresça sem problemas.
Então, vamos modificar o arquivo: src/components/expandable/expandable.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Component, Input, ViewChild, ElementRef, Renderer } from '@angular/core'; @Component({ selector: 'expandable', templateUrl: 'expandable.html' }) export class ExpandableComponent { @ViewChild('expandWrapper', {read: ElementRef}) expandWrapper; @Input('expanded') expanded; @Input('expandHeight') expandHeight; constructor(public renderer: Renderer) { } ngAfterViewInit(){ this.renderer.setElementStyle(this.expandWrapper.nativeElement, 'height', this.expandHeight + 'px'); } } |
Agora temos a classe para o componente. Isso também é bastante simples – configuramos as duas entradas que queríamos, e também agarramos uma referência ao expandWrapper usando a variável de modelo que adicionamos anteriormente. Usamos essa referência para definir a altura do componente na função ngAfterViewInit.
3. Utilizar o componente Accordion List
Bom, depois de criado o componente e configurado corretamente, vamos agora utilizá-lo em nossa aplicação.
Como mencionei, vamos usá-lo para criar um efeito de Accordion List, então, vamos usá-lo em uma lista. É bem simples, porém precisamos adicionar um pouco de lógica para fechar todos os outros componentes expandidos na lista quando um novo componente é expandido (de modo que apenas um esteja aberto por vez), certo?!
Vamos modificar o arquivo src/pages/home/home.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content> <ion-list> <button detail-none (click)="expandItem(item)" ion-item *ngFor="let item of items"> <ion-thumbnail item-start> <img src="http://placehold.it/100"> </ion-thumbnail> <h2>My Neighbor Totoro</h2> <p>Hayao Miyazaki • 1988</p> <expandable [expandHeight]="itemExpandHeight" [expanded]="item.expanded"> Hello people </expandable> <button ion-button clear item-end>View</button> </button> </ion-list> </ion-content> |
Acabamos de adicionar uma lista padrão, exceto que adicionamos um componente dentro dele.
Nós vinculamos a entrada de conteúdo expandida para o valor de cada item particular de propriedade expandida (o que nos permitirá alternar individualmente), e também temos um manipulador expandItem, o que nos permitirá alternar o estado expandido dos itens.
Nossa função expandItem mapeia cada elemento na matriz – quando chegar ao item que foi clicado, ele alternará seu estado, e ele irá definir qualquer outro item expandido de volta para o estado colapsado, criando assim, o efeito de Accordion.
Então, vamos aplicá-lo ao arquivo src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { items: any = []; itemExpandHeight: number = 100; constructor(public navCtrl: NavController) { this.items = [ {expanded: false}, {expanded: false}, {expanded: false}, {expanded: false}, {expanded: false}, {expanded: false}, {expanded: false}, {expanded: false}, {expanded: false} ]; } expandItem(item){ this.items.map((listItem) => { if(item == listItem){ listItem.expanded = !listItem.expanded; } else { listItem.expanded = false; } return listItem; }); } } |
Ainda podemos deixar a lista um pouco mais elegante, alinhando o componente à imagem e o botão de exibição na parte superior do item.
Para isso, vamos alterar o arquivo src/pages/home/home.scss:
1 2 3 4 5 6 7 8 9 10 11 |
.ios, .md { page-home { button { align-items: baseline; } } } |
Se você carregar o aplicativo no seu navegador agora, você deve ter algo que se parece com isto:
Para executar no navegador, executamos o comando:
1 |
ionic serve -l |
Bom, é isso.
A partir daí, a criatividade pode deixar nossa aplicação ainda mais interativa e bonita.
Espero que tenham gostado e que possa ser útil nos projetos de vocês.
O Código fonte para tudo isso que fizemos, encontra-se aqui.
Valeu pessoal, até mais!!
About author
You might also like
Curso de Ionic e C# por R$19,99 ganhou 36 novas aulas!
Share this on WhatsAppGalera, neste mês estarei dando um grande brinde para quem comprou meu curso “Criando aplicativos robustos com Ionic 3” Adicionei 36 novas aulas onde ensino criar um
Veja como criar aplicação web, desktop e mobile com um único código
Share this on WhatsAppAndré Baltieri disponibiliza curso que leva AngularJS pra todo lado Esta semana nosso parceiro e amigo André Baltieri disponibilizou um curso muito interessante onde ele irá mostrar
Live 03 – Como GERAR PDF em IONIC 5
Share this on WhatsAppFala Dev!Estarei realizando uma live no dia 30/04 as 21:10h onde ensinarei Como GERAR PDF em IONIC 5.Ha ideia dessa live surgiu a partir das dúvidas de
8 Comments
Jefferson
novembro 09, 10:53dany
agosto 21, 17:36GabrielSilva
maio 23, 17:08Dudu
maio 28, 12:49Paulo Rogério
junho 01, 08:12Silvair L. Soares
outubro 16, 22:23Br4n0
fevereiro 09, 15:16dany
agosto 21, 17:28