@rdkmaster/jigsaw-labs
Version:
Jigsaw, the next generation component set for RDK
21 lines (18 loc) • 777 B
HTML
<div class="jigsaw-collapse-item"
[class.jigsaw-collapse-item-inactive]="!isActive">
<div class="jigsaw-collapse-header" (click)="_$onClick()">
<i class="fa fa-angle-down jigsaw-collapse-arrow"></i>
<!-- 普通的header -->
<ng-template [ngIf]="title">
{{title}}
</ng-template>
<!-- 自定义的header render.-->
<ng-content select="[jigsaw-title], [j-title]"></ng-content>
</div>
<div class="jigsaw-collapse-content" (transitionend)="_$isTransitionEnd = true"
[style.height]="isActive ? (_$isTransitionEnd ? 'auto' : panelContent.offsetHeight + 'px') : 0">
<div #panelContent class="jigsaw-collapse-padding">
<ng-content></ng-content>
</div>
</div>
</div>