daily pastebin goal
47%
SHARE
TWEET

Untitled

a guest Aug 21st, 2018 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <ion-list>
  2.   <button detail-none (click)="expandItem(item)" ion-item *ngFor="let item of items">
  3.     <ion-thumbnail item-start>
  4.       <img src="assets/imgs/bolacha.png">
  5.     </ion-thumbnail>
  6.     <h2>My Neighbor Totoro</h2>
  7.     <p>Hayao Miyazaki • 1988</p>
  8.     **<expandable** [expandHeight]="itemExpandHeight" [expanded]="item.expanded">
  9.         Hello people
  10.     **</expandable>**
  11.     <button ion-button clear item-end>View</button>
  12.   </button>
  13. </ion-list>
  14.    
  15. import { Component } from '@angular/core';
  16. import { IonicPage, NavController, NavParams } from 'ionic-angular';
  17.  
  18. /**
  19.  * Generated class for the TaxaIncendioPage page.
  20.  *
  21.  * See https://ionicframework.com/docs/components/#navigation for more info on
  22.  * Ionic pages and navigation.
  23.  */
  24.  
  25. @IonicPage()
  26. @Component({
  27.   selector: 'page-taxa-incendio',
  28.   templateUrl: 'taxa-incendio.html',
  29. })
  30. export class TaxaIncendioPage {
  31.  
  32.   items: any = [];
  33.   itemExpandHeight: number = 100;
  34.  
  35.   constructor(public navCtrl: NavController, public navParams: NavParams) {
  36.  
  37.     this.items = [
  38.       {expanded: false},
  39.       {expanded: false},
  40.       {expanded: false},
  41.       {expanded: false},
  42.       {expanded: false},
  43.       {expanded: false},
  44.       {expanded: false},
  45.       {expanded: false},
  46.       {expanded: false}
  47.     ];
  48.  
  49.   }
  50.  
  51.   expandItem(item){
  52.  
  53.     this.items.map((listItem) => {
  54.  
  55.         if(item == listItem){
  56.             listItem.expanded = !listItem.expanded;
  57.         } else {
  58.             listItem.expanded = false;
  59.         }
  60.  
  61.         return listItem;
  62.  
  63.     });
  64.  
  65.   }
  66.  
  67.   ionViewDidLoad() {
  68.     console.log('ionViewDidLoad TaxaIncendioPage');
  69.   }
  70.  
  71.   exibir(item)
  72.   {
  73.     item.styleClass = (Number(item.styleClass) == 1)?0:1;
  74.   }
  75.  
  76. }
  77.    
  78. .ios, .md{
  79.     page-taxa-incendio {
  80.         button{
  81.             align-items: baseline;
  82.         }
  83.     }
  84. }
  85.    
  86. import { Component, Input, ViewChild, ElementRef, Renderer } from '@angular/core';
  87.  
  88. /**
  89.  * Generated class for the ExpendableComponent component.
  90.  *
  91.  * See https://angular.io/api/core/Component for more info on Angular
  92.  * Components.
  93.  */
  94. @Component({
  95.   selector: 'expendable',
  96.   templateUrl: 'expendable.html'
  97. })
  98. export class ExpendableComponent {
  99.  
  100.   text: string;
  101.  
  102.   @ViewChild('expandWrapper', {read: ElementRef}) expandWrapper;
  103.   @Input('expanded') expanded;
  104.   @Input('expandHeight') expandHeight;
  105.  
  106.   constructor(public renderer: Renderer) {
  107.     console.log('Hello ExpendableComponent Component');
  108.     this.text = 'Hello World';
  109.   }
  110.  
  111.   ngAfterViewInit(){
  112.     this.renderer.setElementStyle(this.expandWrapper.nativeElement, 'height', this.expandHeight + 'px');  
  113.   }
  114.  
  115. }
  116.    
  117. <!-- Generated template for the ExpendableComponent component -->
  118. <div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded">
  119.   <ng-content></ng-content>
  120. </div>
  121.    
  122. expandable {
  123.  
  124.     .expand-wrapper {
  125.         transition: 0.2s linear;
  126.     }  
  127.  
  128.     .collapsed {
  129.         height: 0 !important;
  130.     }
  131.  
  132. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top