core/list-group/list-item.component.ts
A list item is a representation of an item inside a list and
can be used to compose different styles in a list (mainly in a
The item can be composed via content projection. The following example shows a radio list with an icon, two actions and a footer:
<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>| host | { |
| selector | c8y-list-item, c8y-li |
| templateUrl | ./list-item.component.html |
Properties |
Methods |
Inputs |
Outputs |
| active |
Type : boolean
|
Default value : false
|
|
If set to true, the class "active" is added which indicates that the current row is active. |
| collapsed |
Type : boolean
|
Default value : true
|
|
Indicates if the current list item is collapsed. You can trigger the collapsing from any element event by toggling this value. |
| emptyActions |
Type : boolean
|
Default value : false
|
|
If set to true, the class "c8y-list__item--empty-actions" is added which adds additional padding to compensate for the "actions" column in other list items. |
| selectable |
Type : boolean
|
Default value : true
|
|
Indicates if the current list item is selectable. |
| collapsedChange |
Type : EventEmitter
|
|
An event emitter which is triggered when the user collapses the content via the chevron on the right. |
| pulse |
pulse()
|
|
Highlights the list-item. This method should be used to show the user that something within this item was changed.
Returns :
void
|
| showDropdownUp |
showDropdownUp()
|
|
A helper function which helps to determine if the dropdown should toggle up.
Returns :
void
|
| toggleCollapsed | ||||||||
toggleCollapsed($event?: Event)
|
||||||||
|
Toggles the collapse state and emits this state as collapsedChange output as boolean.
Parameters :
Returns :
void
|
| itemActions |
Type : QueryList<ListItemActionComponent>
|
Decorators :
@ContentChildren(ListItemActionComponent)
|
|
[[ListItemActionComponent]] elements which can be used to show an action. An action is displayed on the right in the dropdown and usually consists of an icon and a label. |
| itemCollapse |
Type : ListItemCollapseComponent
|
Decorators :
@ContentChild(ListItemCollapseComponent, {static: false})
|
|
[[ListItemCollapseComponent]] elements which can be used to show detail views. |
| itemFooter |
Type : ListItemFooterComponent
|
Decorators :
@ContentChild(ListItemFooterComponent, {static: false})
|
|
A [[ListItemFooterComponent]] element which can be used to show a footer. |
<div [ngClass]="{ 'expanded': !collapsed, interact: (itemCollapse && itemCollapse.collapseWay === 'row')}">
<div class="c8y-list__item__block">
<ng-content select="c8y-list-item-drag-handle, c8y-li-drag-handle"></ng-content>
<ng-content select="c8y-list-item-radio, c8y-li-radio"></ng-content>
<ng-content select="c8y-list-item-checkbox, c8y-li-checkbox"></ng-content>
<ng-content select="c8y-list-item-icon, c8y-li-icon"></ng-content>
<div class="c8y-list__item__body text-truncate-wrap" (click)="(itemCollapse && itemCollapse.collapseWay === 'row') && toggleCollapsed()">
<ng-content select="c8y-list-item-body, c8y-li-body"></ng-content>
<ng-content></ng-content>
<div class="c8y-list__item__footer" *ngIf="showFooter">
<ng-content select="c8y-list-item-footer, c8y-li-footer"></ng-content>
</div>
</div>
<div class="c8y-list__item__actions" *ngIf="(showCollapse && (itemCollapse && itemCollapse.collapseWay === 'button')) || showActions">
<button
class="collapse-btn"
title="{{ 'Expand' | translate }}"
type="button"
(click)="toggleCollapsed($event)"
[attr.aria-expanded]="!collapsed"
*ngIf="showCollapse && itemCollapse.collapseWay === 'button'"
>
<i [c8yIcon]="'chevron-down'"></i>
</button>
<div
class="dropdown"
dropdown
[dropup]="dropdownUp"
*ngIf="showActions"
(onShown)="showDropdownUp()"
>
<button
class="dropdown-toggle c8y-dropdown"
dropdownToggle
title="{{ 'Actions' | translate }}"
type="button"
aria-haspopup="true"
>
<i [c8yIcon]="'ellipsis-v'"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<ng-content select="c8y-list-item-action, c8y-li-action"></ng-content>
<ng-container *ngFor="let action of actions">
<ng-container *ngTemplateOutlet="action.template"></ng-container>
</ng-container>
</ul>
</div>
<ng-content select="c8y-list-item-action, c8y-li-action" *ngIf="showActions"></ng-content>
</div>
</div>
<div *ngIf="showCollapse" [collapse]="collapsed" [isAnimated]="true">
<div class="c8y-list__item__collapse--container">
<ng-content select="c8y-list-item-collapse, c8y-li-collapse"></ng-content>
</div>
</div>
</div>