Web SDK documentation
  1. Components
  2. SplitViewListComponent

File

core/split-view/split-view-list.component.ts

Metadata

host {
}
selector c8y-sv-list
standalone true
imports NgClass LoadingComponent EmptyStateComponent C8yTranslatePipe C8yTranslateDirective GuideDocsComponent GuideHrefDirective
templateUrl ./split-view-list.component.html

Index

Properties
Inputs
Accessors

Inputs

docsUrl
Type : string

Documentation URL to display in the empty state. When provided, a link to the documentation will be shown.
emptyStateIcon
Type : string
Default value : 'c8y-alert-idle' as string

Custom empty state icon
emptyStateSubtitle
Type : string

Custom empty state subtitle
emptyStateTitle
Type : string
Default value : gettext('No items to display.') as string

Custom empty state title
listOpacity
Type : number
Default value : 1

Opacity for the list content (CSS opacity: 0-1 scale).

Use this to dim the list during loading states while showing a loading indicator. Defaults to 1 (fully opaque).

Example :
<!-- Dim list to 20% opacity during initial load -->
<c8y-sv-list [listOpacity]="isLoading ? 0.2 : 1">
loading
Type : boolean
Default value : false

Whether the list is currently loading
showEmptyState
Type : boolean
Default value : true

Whether to show empty state
showTitle
Type : boolean

Whether to show the title in the list header. If not provided, automatically detected based on parent split view presence:

  • Inside <c8y-sv>: shows the title (full page context)
  • Outside <c8y-sv>: hides the title (widget context where widget provides its own title bar)
title
Type : string
Default value : gettext('Split view list') as string

Title for the list section. Also used as aria-label if provided.

Properties

Readonly Optional alertsComp
Type : SplitViewAlertsComponent
Decorators :
@ContentChild(SplitViewAlertsComponent)
Optional innerScrollDiv
Type : ElementRef<HTMLDivElement>
Decorators :
@ViewChild('innerScrollDiv')

Reference to the inner scroll div element. Available after ngAfterViewInit lifecycle hook.

Accessors

hasAlerts
gethasAlerts()
shouldShowTitle
getshouldShowTitle()

Computed property that determines if the title should be shown. Uses the explicit showTitle input if provided, otherwise falls back to automatic detection.

Automatic detection logic:

  • Inside <c8y-sv>: shows the title (full page context)
  • Outside <c8y-sv>: hides the title (widget context where widget provides its own title bar)
Returns : boolean
isSplitView
getisSplitView()

Determines if split view layout styles should be applied based on the presence of a details panel.

When a details panel (<c8y-sv-details>) is present alongside the list:

  • Returns true → applies split-view__list bg-level-1 classes (lighter background for contrast)

When no details panel is present (single column or widget usage):

  • Returns false → applies bg-component class (standard component background)

This detection is automatic and based on the actual layout structure.

Returns : boolean 
<div
  class="inner-scroll fit-h"
  [attr.aria-label]="title | translate"
  role="region"
  [ngClass]="{ 'split-view__list bg-level-1': isSplitView, 'bg-component': !isSplitView }"
  data-cy="c8y-sv-list"
  #innerScrollDiv
>
  @if (title || hasAlerts) {
    <div
      class="flex-wrap flex-no-shrink sticky-top gap-8"
      [ngClass]="{
        'card-header separator': title && shouldShowTitle
      }"
    >
      @if (title && shouldShowTitle) {
        <h4 class="card-title">
          {{ title | translate }}
        </h4>
      }
      <ng-content select="c8y-sv-header-actions"></ng-content>
      @if (hasAlerts) {
        <ng-content select="c8y-sv-alerts"></ng-content>
      }
    </div>
  }
  <div data-cy="c8y-sv-list--group">
    @if (loading && !showEmptyState) {
      <div class="p-absolute fit-w overflow-hidden p-b-4">
        <c8y-loading
          [layout]="'page'"
          data-cy="c8y-sv-list--loading"
        ></c8y-loading>
      </div>
    }
    <ng-content></ng-content>

    @if (showEmptyState) {
      <div class="p-relative p-l-24">
        <c8y-ui-empty-state
          [icon]="emptyStateIcon"
          [title]="emptyStateTitle"
          [subtitle]="emptyStateSubtitle"
          data-cy="c8y-sv-list--empty-state"
        >
          @if (docsUrl) {
            <p>
              <small
                c8y-guide-docs
                translate
                [translateParams]="{ docsUrl }"
                ngNonBindable
              >
                Find out more in the
                <a c8y-guide-href="{{ docsUrl }}">user documentation</a>
                .
              </small>
            </p>
          }
        </c8y-ui-empty-state>
      </div>
    }
  </div>

  <ng-content select="c8y-sv-footer"></ng-content>
</div>

results matching ""

    No results matching ""