Hello Everybody
The accordion component missing in Ionic2 ?
Hello Everybody
The accordion component missing in Ionic2 ?
It isn’t “missing”, as far as I know there was no accordion component in Ionic 1 either, however it’s fairly simple to make one yourself, here are some links:
http://codepen.io/ionic/pen/uJkCz
Accordion List
http://loring-dodge.azurewebsites.net/ionic-item-expand
Or maybe the Ionic Market has something (haven’t checked).
Hi @big_bill91
You can create accordian in ionic 2 by creating a directive and use that directive in which div you want to apply that
Ts file
@Directive({ selector: ‘[collapse]’ })
export class Collapse {
@HostBinding(‘class.collapsing’)
public isCollapsing: boolean
// style
@HostBinding(‘style.height’)
public height: string;
@Input()
public set collapse(value: boolean) {
if (value !== undefined) {
if (value) {
this.hide();
} else {
this.show();
}
}
}
constructor(public el: ElementRef) {
this.measureHeight();
}
measureHeight() {
let elem = this.el.nativeElement;
//lets be sure the element has display:block style
elem.className = elem.className.replace(‘collapse’, ‘’);
//this.h = elem.scrollHeight;
}
hide() {
this.height = ‘auto’;
setTimeout(() => {
this.height = ‘0px’;
this.isCollapsing = true;//apply ‘collapsing’ class
}, 1);
}
show() {
this.height = '0px’
setTimeout(() => {
this.height = ‘auto’;
this.isCollapsing = true;//apply ‘collapsing’ class
}, 1);
}
Use [collapse] directive in your div like " [collapse]=“booleanValueBind”"
I write this using latest Ionic 2 Final https://www.djamware.com/post/5892739480aca7411808fa9c/how-to-create-ionic-2-accordion-list it was very simple thing
this is great but if you want to ahve a multi lvl accordion lets say 4 lvlvs down how do you change the code?
Does anyone has an animated accordion?