List group

List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic list-group

The most basic list group is simply an unordered list with list items, and the proper classes.

  • Something
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item">Something</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

List groups with badges

Add the badges component to any list group item and it will automatically be positioned on the right.

  • 14 Something
  • 10 Dapibus ac facilisis in
  • 5Morbi leo risus
  • 8Porta ac consectetur ac
  • 3 Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item"><span class="badge">14</span> Something</li>
  <li class="list-group-item"><span class="badge badge-brand">10</span> Dapibus ac facilisis in</li>
  <li class="list-group-item"><span class="badge badge-success">5</span>Morbi leo risus</li>
  <li class="list-group-item"><span class="badge badge-danger">8</span>Porta ac consectetur ac</li>
  <li class="list-group-item"><span class="badge badge-warning">3</span> Vestibulum at eros</li>
</ul>

Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.

Dapibus ac facilisis in Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros Dapibus ac facilisis in Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros
<div class="list-group">
  <span class="list-group-item list-group-item-active">Dapibus ac facilisis in</span>
  <span class="list-group-item list-group-item-success">Dapibus ac facilisis in</span>
  <span class="list-group-item list-group-item-info">Cras sit amet nibh libero</span>
  <span class="list-group-item list-group-item-warning">Porta ac consectetur ac</span>
  <span class="list-group-item list-group-item-danger">Vestibulum at eros</span>
  <a href="#" class="list-group-item list-group-item-active">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
  

Icon and/or actions in items

Add an icon, a checkbox or a dropdown for contextual actions easily.

For consistency reasons, use the vertical ellipsis icon — — on the dropdown.

Alarms report
Last week Last month Last year  
Events report
Last week Last month Last year  

Collapsible content

Add .collapsible to the .list-group-item to use a collapsible element. Refer to Angular UI Bootstrap for adding a collapse.


No data received from device within required interval.
25 October 2016 22:23  
 My Device My Device

No data received from device within required interval.
25 October 2016 22:25  
 OBU-GT_abcd OBU-GT_abcd
Temperature

Demoboard Energy Monitor

Speed

Demoboard Energy Monitor

<div class="list-group">
  <!-- on opening the collapse, add .expanded to the .list-group-item -->
  <div class="list-group-item flex-row collapsible" ng-class="{'expanded': isDetailExpanded}">

    <div class="list-item-actions">
      <!-- collapse button - first element -->
      <button type="button" title="Expand" class="collapse-btn" ng-click="isDetailExpanded = !isDetailExpanded">
        <i c8y-icon="chevron-down" class="fa fw fa-chevron-down"></i>
      </button>
      <!-- dropdown settings -->
      <div class="dropdown settings" is-open="false" uib-dropdown="">
        <button class="dropdown-toggle c8y-dropdown"  aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle="" title="Actions">
          <i c8y-icon="ellipsis-v" class="fa fw fa-ellipsis-v"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu="">
          ...
        </ul>
      </div>
    </div>

    <div class="list-item-icon">
      <i class="fa fa-bell"></i>
    </div><!-- .list-item-icon -->

    <div class="list-item-body">
      No data received from device within required interval.<br>
      <small class="text-muted" title="Last occurrence of this alarm (device time).">
        <i class="fa fw fa-clock-o"></i>25 October 2016 22:23
      </small>  
      <br class="visible-xs">
      <a ng-href="#/device/10222" ng-hide="hideDevice || !getDeviceLinkFromAlarm(alarm)" title="Go to device" href="#/device/10222" class="">
        <small class="ng-binding">
          <i c8y-icon="exchange" class="fa fw fa-exchange"></i> My Device
        </small>
      </a>
      <span class="text-muted ng-hide" ng-hide="hideDevice || getDeviceLinkFromAlarm(alarm)">
        <small class="word-break ng-binding"><i c8y-icon="cog" class="fa fw fa-cog"></i> My Device</small>
      </span>
    </div><!-- .list-item-body -->


      <div class="collapse" uib-collapse="!isDetailExpanded" ></div>
    </div>
  </div>
</div>