@rdkmaster/jigsaw-labs/component/collapse/collapse-pane.html

Jigsaw, the next generation component set for RDK

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