是否可以在ngbaccordion中使用cdk虚拟滚动

时间:2019-03-28 11:54:14

标签: accordion ng-bootstrap angular-cdk-virtual-scroll

需要知道是否可以在ng-bootstrap之类的特定手风琴中使用此新功能@ angular / cdk / scroll(在mat手风琴中为https://stackblitz.com/edit/virtual-scroll-expansion-panels?file=app%2Fapp.component.ts

https://stackblitz.com/edit/angular-ahzm1v?file=app%2Faccordion-basic.ts

1 个答案:

答案 0 :(得分:0)

是的,可能由虚拟滚动组成的组件将驻留在手风琴组件内部。

检查demo here

accordian.component.html

<script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

<center>
  <button id="count">Count</button>
  <ul id="date-list"></ul>
</center>

编辑stackblitz code above仍然相关。以下CSS在虚拟滚动条中创建了手风琴。

<ngb-accordion #acc="ngbAccordion" >
    <ngb-panel [title]="num" *ngFor="let num of numbers">
        <ng-template ngbPanelContent>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
            put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
            wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
            <cdk-virtual-scroll> Loading..... </cdk-virtual-scroll>
            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore
            sustainable VHS.
        </ng-template>
    </ngb-panel>
</ngb-accordion>