setembro 21, 2017 Comments 6 Junior Abranches 12412 Views

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:

ionic start ionic-expandable-list blank

1	ionic start ionic-expandable-list blank

Uma vez criado, vamos entrar no diretório do Projeto, executando:

cd ionic-expandable-list

1	cd ionic-expandable-list

Agora, criaremos o componente, chamando-o de Expandable, então também geraremos isso agora:

ionic g component Expandable

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:

<div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded">
    <ng-content></ng-content>
</div>

<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

expandable {

    .expand-wrapper {
        transition: 0.2s linear;
    }   

    .collapsed {
        height: 0 !important;
    }

}

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

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');    
    }

}

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

<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>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-list>

<ion-thumbnail item-start>

</ion-thumbnail>

<h2>My Neighbor Totoro</h2>

<p>Hayao Miyazaki • 1988</p>

Hello people

</expandable>

</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

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;

        });

    }

}

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}

];

}

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:

.ios, .md {

    page-home {

        button {
            align-items: baseline;
        }

    }

}

.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:

ionic serve -l

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!!

Share this on WhatsApp

Previous Veja como criar notificações no Chrome através da classe Notifications!

Next Criando um background com slides em aplicações mobile com Ionic

Tags android angular 4 ionic 3 ios mobile

Category Mobile

About author

Junior Abranches 19 posts

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

Silvair L. Soares

outubro 16, 22:23 Reply

Quando tento abrir uma página onde utilizo o componente, recebo o seguinte erro no console: Can't bind to 'expandHeight' since it isn't a known property of 'expandable'. Código do meu componente: 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'); } } Código da pagina onde uso o componente: ts: import { ClienteModel } from './../../model/ClienteModel'; import { ClienteProvider } from '../../providers/cliente/ClienteProvider'; import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular'; import { Storage } from '@ionic/storage'; import { TranslatorProvider } from '../../providers/translator/translator'; import { ExpandableComponent } from '../../components/expandable/expandable' @IonicPage() @Component({ selector: 'page-cliente', templateUrl: 'cliente.html', }) export class ClientePage { model: ClienteModel; public str: any; items: any = []; itemExpandHeight: number = 100; constructor(public translatorProvider: TranslatorProvider, public navCtrl: NavController, public navParams: NavParams, private toast: ToastController, private clienteProvider: ClienteProvider, public storage: Storage) { this.model = new ClienteModel(); if (this.navParams.data.id) { this.clienteProvider.get(this.navParams.data.id) .then((result: any) => { this.model = result; }) } 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; }); } html: My Neighbor Totoro Hayao Miyazaki • 1988 Hello people View Aparentemente tudo igual ao exemplo. Poderia me dar um norte sobre este problema?

6 Comments

Jefferson
novembro 09, 10:53 Reply

Oii,bom dia , como faço pra usar em minha pagina já criada ? é só copiar os elemetos e cola ?
GabrielSilva
maio 23, 17:08 Reply

Olá. Eu gostaria de saber se há a possibilidade de criar uma List dentro da Accordion List explicada. Tentei implementar, porém a altura do expandable component está fixa. Além disso, tento selecionar o subitem da lista porém ela apenas retrai, não dando push na página que eu gostaria que aparecesse...
Dudu
maio 28, 12:49 Reply

Amigo, boa tarde. Deu certo a implementação conforme seu tutorial, porém inseri um novo button que abre um modal dentro do button que faz o expand, e ele nao funciona (fica com a propriedade do expand). Tem ideia de como resolver? Legislação
- Paulo Rogério
  junho 01, 08:12 Reply
  
  Só olhando seu código para identificar o problema.
Silvair L. Soares
outubro 16, 22:23 Reply

Quando tento abrir uma página onde utilizo o componente, recebo o seguinte erro no console: Can't bind to 'expandHeight' since it isn't a known property of 'expandable'. Código do meu componente: 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'); } } Código da pagina onde uso o componente: ts: import { ClienteModel } from './../../model/ClienteModel'; import { ClienteProvider } from '../../providers/cliente/ClienteProvider'; import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular'; import { Storage } from '@ionic/storage'; import { TranslatorProvider } from '../../providers/translator/translator'; import { ExpandableComponent } from '../../components/expandable/expandable' @IonicPage() @Component({ selector: 'page-cliente', templateUrl: 'cliente.html', }) export class ClientePage { model: ClienteModel; public str: any; items: any = []; itemExpandHeight: number = 100; constructor(public translatorProvider: TranslatorProvider, public navCtrl: NavController, public navParams: NavParams, private toast: ToastController, private clienteProvider: ClienteProvider, public storage: Storage) { this.model = new ClienteModel(); if (this.navParams.data.id) { this.clienteProvider.get(this.navParams.data.id) .then((result: any) => { this.model = result; }) } 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; }); } html: My Neighbor Totoro Hayao Miyazaki • 1988 Hello people View Aparentemente tudo igual ao exemplo. Poderia me dar um norte sobre este problema?
Br4n0
fevereiro 09, 15:16 Reply

Olá Paulo Rogério, tranquilo?! Funicionou perfeitamente conforme o exemplo, porém quando uso algum item ionico, tipo , deixa de funcionar. Tem alguma ideia do que pode ser? Obrigado. Abraços. PS: Usando como base o projeto seu do Udemy, ionic 3 + asp.net core api.

Criando Componente Accordion List com Ionic 3

1. Criar o projeto Ionic

2. Construindo o componente Expandable

3. Utilizar o componente Accordion List

About author

You might also like

Grátis – Crie Apps com Ionic 3 e WebApi em Asp.Net Core usando DDD

Curso Ionic em português – Aula 5 – Salvando e obtendo dados do localStorage

Integrando Ionic 5 com o Zoom

6 Comments

Jefferson

GabrielSilva

Dudu

Paulo Rogério

Silvair L. Soares

Br4n0

Leave a Reply

Clique aqui para cancelar a resposta.

Buscar no site

FIQUE ATUALIZADO

GRUPOS VIPS

Siga-nos

Cursos

Desenvolvedor

Full-Stack Software Development Engineer

Engenheiros de Desenvolvimento de Software Senior Full Stack e Mobile

Senior Full Stack and Mobile Software Development Engineers

Engenheiros de Desenvolvimento de Software Senior Full Stack e Mobile