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:
Example :<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. Example : |
| dense |
Type : boolean
|
Default value : false
|
|
If set to true, the item will be displayed in a dense style. |
| 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. |
| highlighted |
Type : boolean
|
Default value : false
|
|
If set to true, the class "highlighted" is added which indicates that the current row is highlighted. |
| 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
|
| rowToggleCollapsed |
rowToggleCollapsed()
|
|
Toggles the collapse state in case the
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. Example : |
| itemCollapse |
Type : ListItemCollapseComponent
|
Decorators :
@ContentChild(ListItemCollapseComponent, {static: false})
|
|
[[ListItemCollapseComponent]] elements which can be used to show detail views. Example : |
| itemFooter |
Type : ListItemFooterComponent
|
Decorators :
@ContentChild(ListItemFooterComponent, {static: false})
|
|
A [[ListItemFooterComponent]] element which can be used to show a footer. Example : |
<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)="rowToggleCollapsed()"
>
<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 }}"
[attr.aria-expanded]="!collapsed"
type="button"
(click)="toggleCollapsed($event)"
*ngIf="showCollapse && itemCollapse.collapseWay === 'button'"
data-cy="c8y-li--collapse-btn"
>
<i [c8yIcon]="'chevron-down'"></i>
</button>
<div
class="dropdown"
#liDropdownActions="bs-dropdown"
[cdkTrapFocus]="liDropdownActions.isOpen"
dropdown
c8yDropdownDirection
#dropDirection="bs-dropdown"
[cdkTrapFocus]="dropDirection.isOpen"
*ngIf="showActions"
>
<button
class="dropdown-toggle c8y-dropdown"
title="{{ 'Actions' | translate }}"
type="button"
dropdownToggle
data-cy="c8y-li--actions-btn"
>
<i [c8yIcon]="'ellipsis-v'"></i>
</button>
<ul
class="dropdown-menu dropdown-menu-right"
data-cy="list-item--dropdown-menu"
*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>