Web SDK documentation
  1. Components
  2. ListGroupComponent

File

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

Description

List groups are flexible and powerful components for displaying both simple lists of elements and complex ones with custom content.

<c8y-list-group>
  <c8y-li>
    Plain <strong>Text</strong>
  </c8y-li>
  <c8y-li>
    <c8y-li-icon [icon]="'rocket'"></c8y-li-icon>
    Icon
  </c8y-li>
  <c8y-li>
    <c8y-li-radio></c8y-li-radio>
    Radio
  </c8y-li>
  <c8y-li>
    <c8y-li-checkbox></c8y-li-checkbox>
    Checkbox
  </c8y-li>
  <c8y-li>
    Content
    <c8y-li-footer>
      Footer
    </c8y-li-footer>
  </c8y-li>
  <c8y-li>
    Content
    <c8y-li-action icon="rocket">
      Launch
    </c8y-li-action>
  </c8y-li>
  <c8y-li>
    Content
    <c8y-li-collapse>
      Collapsed content
    </c8y-li-collapse>
  </c8y-li>
</c8y-list-group>

Metadata

host {
}
selector c8y-list-group
templateUrl ./list-group.component.html

Index

Properties

Properties

timelineComponent
Type : ListItemTimelineComponent
Decorators :
@ContentChild(ListItemTimelineComponent, {static: false})

Displays the current list as a timeline. Best used with content projection.

<c8y-list-group>
  <c8y-li-timeline>
    24.April 2020
    <c8y-li>
      Hello
    </c8y-li>
  </c8y-li-timeline>
</c8y-list-group>
 
<ng-content></ng-content>

results matching ""

    No results matching ""