core/list-group/list-group.module.ts
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>
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-group
component 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.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