Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ion-list>
- <button detail-none (click)="expandItem(item)" ion-item *ngFor="let item of items">
- <ion-thumbnail item-start>
- <img src="assets/imgs/bolacha.png">
- </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>
- import { Component } from '@angular/core';
- import { IonicPage, NavController, NavParams } from 'ionic-angular';
- /**
- * Generated class for the TaxaIncendioPage page.
- *
- * See https://ionicframework.com/docs/components/#navigation for more info on
- * Ionic pages and navigation.
- */
- @IonicPage()
- @Component({
- selector: 'page-taxa-incendio',
- templateUrl: 'taxa-incendio.html',
- })
- export class TaxaIncendioPage {
- items: any = [];
- itemExpandHeight: number = 100;
- constructor(public navCtrl: NavController, public navParams: NavParams) {
- 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;
- });
- }
- ionViewDidLoad() {
- console.log('ionViewDidLoad TaxaIncendioPage');
- }
- exibir(item)
- {
- item.styleClass = (Number(item.styleClass) == 1)?0:1;
- }
- }
- .ios, .md{
- page-taxa-incendio {
- button{
- align-items: baseline;
- }
- }
- }
- import { Component, Input, ViewChild, ElementRef, Renderer } from '@angular/core';
- /**
- * Generated class for the ExpendableComponent component.
- *
- * See https://angular.io/api/core/Component for more info on Angular
- * Components.
- */
- @Component({
- selector: 'expendable',
- templateUrl: 'expendable.html'
- })
- export class ExpendableComponent {
- text: string;
- @ViewChild('expandWrapper', {read: ElementRef}) expandWrapper;
- @Input('expanded') expanded;
- @Input('expandHeight') expandHeight;
- constructor(public renderer: Renderer) {
- console.log('Hello ExpendableComponent Component');
- this.text = 'Hello World';
- }
- ngAfterViewInit(){
- this.renderer.setElementStyle(this.expandWrapper.nativeElement, 'height', this.expandHeight + 'px');
- }
- }
- <!-- Generated template for the ExpendableComponent component -->
- <div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded">
- <ng-content></ng-content>
- </div>
- expandable {
- .expand-wrapper {
- transition: 0.2s linear;
- }
- .collapsed {
- height: 0 !important;
- }
- }
Add Comment
Please, Sign In to add comment