Nativescript-Ngx-Accordion

一个用于展开/折叠切换面板的 Nativescript Angular UI 控件。它是 (IListView) 控件的扩展。

设置

npm install nativescript-ngx-accordion --save

将模块导入到您的 app-module

import { AccordionViewModule } from 'nativescript-ngx-accordion';

入门指南

与 ListView 类似，您需要定义 ListItem 模板，如下所示。

<Accordion
    limit="30"
    [items]="items"
    [templateRef]="accordion"
    (eofItems)="addMore()"
  >
    <ng-template #accordion let-item="item" let-index="index">
      <AccordionItem>
        <AccordionHeader>
          <!-- Place the header here -->
        </AccordionHeader>
        <AccordionContent>
          <!-- Place the main content here -->
        </AccordionContent>
        <AccordionFooter>
        <!-- Place the footer here -->
        </AccordionFooter>
        <AccordionDivider>
          <!-- Spacer gap for the items -->
        </AccordionDivider>
        <AccordionPlaceholder>
          <!-- Skeleton for intermediate loading -->
        </AccordionPlaceholder>
      </AccordionItem>
    </ng-template>
  </Accordion>

• AccordionContent 是您插入项目内容的地方，可能是一个 Angular 组件
• AccordionDivider 是项目的一个简单占位符标签，类似于水平线
• AccordionPlaceholder 是在内容实例化之前项目的骨架

选项

AccordionView 接受一个名为 limit 的参数，默认为 30。

当列表达到末尾时，它通过 eofItems 发射器发出一个值，以便异步将更多数据加载到列表中。

AccordionViewService

可以使用 AccordionService 通过 addItems() 方法向列表添加更多项目。

示例

在演示应用中提供