dependencies dependencies cluster_ListGroupModule cluster_ListGroupModule_imports cluster_ListGroupModule_exports cluster_ListGroupModule_declarations ListGroupComponent ListGroupComponent ListGroupModule ListGroupModule ListGroupComponent->ListGroupModule ListItemActionComponent ListItemActionComponent ListItemActionComponent->ListGroupModule ListItemBodyComponent ListItemBodyComponent ListItemBodyComponent->ListGroupModule ListItemCheckboxComponent ListItemCheckboxComponent ListItemCheckboxComponent->ListGroupModule ListItemCollapseComponent ListItemCollapseComponent ListItemCollapseComponent->ListGroupModule ListItemComponent ListItemComponent ListItemComponent->ListGroupModule ListItemDragHandleComponent ListItemDragHandleComponent ListItemDragHandleComponent->ListGroupModule ListItemFooterComponent ListItemFooterComponent ListItemFooterComponent->ListGroupModule ListItemIconComponent ListItemIconComponent ListItemIconComponent->ListGroupModule ListItemRadioComponent ListItemRadioComponent ListItemRadioComponent->ListGroupModule ListItemTimelineComponent ListItemTimelineComponent ListItemTimelineComponent->ListGroupModule ListGroupComponent ListGroupComponent ListGroupModule->ListGroupComponent ListItemActionComponent ListItemActionComponent ListGroupModule->ListItemActionComponent ListItemBodyComponent ListItemBodyComponent ListGroupModule->ListItemBodyComponent ListItemCheckboxComponent ListItemCheckboxComponent ListGroupModule->ListItemCheckboxComponent ListItemCollapseComponent ListItemCollapseComponent ListGroupModule->ListItemCollapseComponent ListItemComponent ListItemComponent ListGroupModule->ListItemComponent ListItemDragHandleComponent ListItemDragHandleComponent ListGroupModule->ListItemDragHandleComponent ListItemFooterComponent ListItemFooterComponent ListGroupModule->ListItemFooterComponent ListItemIconComponent ListItemIconComponent ListGroupModule->ListItemIconComponent ListItemRadioComponent ListItemRadioComponent ListGroupModule->ListItemRadioComponent ListItemTimelineComponent ListItemTimelineComponent ListGroupModule->ListItemTimelineComponent CommonModule CommonModule CommonModule->ListGroupModule

File

core/list-group/list-group.module.ts

Description

The list-group module allows you to compose different styles of lists used in Cumulocity IoT. They can consist of plain text, actions, icons and more.

<c8y-list-group>
  <c8y-li>Item 1<c8y-li>
  <c8y-li>Item 2<c8y-li>
</c8y-list-group>

ListGroupModule

List groups are flexible and powerful components for displaying both simple lists of elements and complex ones with custom content. A list group is used like the ul HTML element, you simply add the c8y-list-groupcomponent and add c8y-li-items as children to it. Inside the c8y-li-item component any HTML or custom tag content is projected. There are the following additional elements which allow to enhance the functionality:

  • c8y-li-icon -> displays an icon at the start.
  • c8y-li-checkbox -> displays a checkbox for selecting the item.
  • c8y-li-radio -> displays a radio for selecting the item.
  • c8y-li-collapse -> displays collapsible content, for example for detail views.
  • c8y-li-action -> displays multiple actions to perform on the item.
  • c8y-li-footer -> displays details of the item in a footer.

Usage example

The component can be fully used by content projection in the template. A simple example shows all the concepts at once:

<c8y-list-group>
  <c8y-li
    *c8yFor="
       let device of devices;
       let i = index;
     "
  >
    <c8y-li-radio (onSelect)="updateSelected($event, device)"></c8y-li-radio>
    <c8y-li-icon [icon]="'rocket'"></c8y-li-icon>
    {{ i + 1 }}. {{ device.name || '-' }}
    <c8y-li-footer>
      Device id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
    </c8y-li-footer>
    <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
      Delete
    </c8y-li-action>
    <c8y-li-action (click)="(false)" icon="rocket">
      Launch to space
    </c8y-li-action>
  </c8y-li>
</c8y-list-group>

In combination with a forOf you can compose more complex examples. E.g. the following example shows a list of all devices with a radio button to select devices, an icon, multiple actions and a footer:

<c8y-list-group>
  <c8y-li
    *c8yFor="
      let device of devices;
      let i = index;
    "
  >
    <c8y-li-radio></c8y-li-radio>
    <c8y-li-icon [icon]="'rocket'"></c8y-li-icon>
    {{ i + 1 }}. {{ device.name || '-' }}
    <c8y-li-footer>
      Device id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
    </c8y-li-footer>

    <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
      Delete
    </c8y-li-action>
    <c8y-li-action (click)="(false)" icon="rocket">
      Launch to space
    </c8y-li-action>
  </c8y-li>
</c8y-list-group>

The content projection allows to add any inline element. For example, you can align the content with an HTML flex box or add a badge quite easy. More examples can be found in the tutorial application:

npx @c8y/cli new myTutorialApp tutorial
cd myTutorialApp
npm install
npm start -- -u http://your-cumulocity-tenant.cumulocity.com

results matching ""

    No results matching ""