Web SDK documentation
  1. Components
  2. ListItemComponent

File

core/list-group/list-item.component.ts

Description

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 -component but also in others like the -component):

  • a list with a footer
  • a list with one or multiple actions
  • an icon
  • a checkbox or radio input

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>
 *

Metadata

host {
}
selector c8y-list-item, c8y-li
templateUrl ./list-item.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

active

If set to true, the class "active" is added which indicates that the current row is active.

Type : boolean

Default value : false

collapsed

Indicates if the current list item is collapsed. You can trigger the collapsing from any element event by toggling this value.

Type : boolean

Default value : true

selectable

Indicates if the current list item is selectable.

Type : boolean

Default value : true

Outputs

collapsedChange

An event emitter which is triggered when the user collapses the content via the chevron on the right.

$event Type: EventEmitter

Methods

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 :
Name Type Optional Description
$event Event Yes

Pass optional an event to stop propagation.
Returns : void

Properties

itemActions
itemActions: QueryList<ListItemActionComponent>
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
itemCollapse: ListItemCollapseComponent
Type : ListItemCollapseComponent
Decorators :
@ContentChild(ListItemCollapseComponent, {static: undefined})

[[ListItemCollapseComponent]] elements which can be used to show detail views.
itemFooter
itemFooter: ListItemFooterComponent
Type : ListItemFooterComponent
Decorators :
@ContentChild(ListItemFooterComponent, {static: undefined})

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-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>

result-matching ""

    No results matching ""