Web SDK documentation
  1. Components
  2. SplitViewDetailsComponent
core/split-view/split-view-details.component.ts

Description

Split View Details Component

Displays the details panel of a split-view layout.

Basic Usage

Example :
<c8y-sv-details
  emptyStateIcon="c8y-devices"
  emptyStateTitle="No device selected"
  emptyStateSubtitle="Select a device to view details">

  @if (selectedItem) {
    <c8y-sv-extra-header>
      <c8y-icon-panel [sections]="sections"></c8y-icon-panel>
    </c8y-sv-extra-header>
  }

  @if (selectedItem) {
    <h3>{{ selectedItem.name }}</h3>
    <p>{{ selectedItem.description }}</p>
  }
</c8y-sv-details>

Router-Outlet Integration

Example :
<c8y-sv-details (backClick)="handleBackClick()">
  <router-outlet></router-outlet>
</c8y-sv-details>
Example :
async handleBackClick(): Promise<void> {
  await this.alarmsViewService.closeDetailsView(this.activatedRoute);
}

Implements

AfterViewInit OnDestroy

Example

Metadata

host {
}
selector c8y-sv-details
standalone true
imports
C8yTranslatePipe
templateUrl ./split-view-details.component.html

Relationships

Used by

Depends on

<div
  class="inner-scroll fit-h d-col fit-w split-view__detail"
  [class.split-view__detail--selected]="hasSelection"
  [attr.aria-label]="ariaLabel | translate"
  role="region"
  [ngClass]="cssClass"
  data-cy="c8y-sv-details"
>
  <!-- Back button for mobile/tablet -->
  @if (hasSelection) {
    <div class="card-header separator sticky-top visible-sm visible-xs">
      <button
        class="btn btn-clean text-primary"
        [title]="'Back' | translate"
        [attr.aria-label]="'Back' | translate"
        type="button"
        (click)="clearSelection()"
      >
        <i c8yIcon="chevron-left"></i>
        <span>{{ 'Back' | translate }}</span>
      </button>
    </div>
  }
  <!-- Content when item is selected -->
  @if (title || hasExtraHeader) {
    <div
      class="p-l-24 p-r-24 card-header flex-no-shrink sticky-top bg-component separator"
      [ngClass]="{ 'flex-wrap': hasExtraHeader, 'gap-8': hasExtraHeader && title }"
    >
      <h4 class="card-title">{{ title | translate }}</h4>
      <ng-content select="c8y-sv-header-actions"></ng-content>
      @if (hasExtraHeader) {
        <div class="details-info fit-w">
          <ng-content select="c8y-sv-extra-header"></ng-content>
        </div>
      }
    </div>
  }
  <!-- Empty state when nothing is selected -->
  @if (!hasSelection) {
    <div class="d-flex a-i-center j-c-center flex-grow p-24">
      <c8y-ui-empty-state
        [icon]="emptyStateIcon"
        [title]="emptyStateTitle"
        [subtitle]="emptyStateSubtitle"
      ></c8y-ui-empty-state>
    </div>
  }
  <!-- Content when item is selected -->
  @if (hasSelection) {
    <div
      class="p-24"
      [ngClass]="{ 'p-t-0': !title && !hasExtraHeader }"
    >
      <div class="details-content">
        <ng-content
          select=":not(c8y-sv-extra-header):not(c8y-sv-details-actions):not(c8y-sv-footer):not(c8y-sv-header-actions)"
        ></ng-content>
      </div>

      @if (hasActions) {
        <div class="details-actions">
          <ng-content select="c8y-sv-details-actions"></ng-content>
        </div>
      }
    </div>
    @if (hasFooter) {
      <ng-content select="c8y-sv-footer"></ng-content>
    }
  }
</div>

results matching ""

    No results matching ""