core/split-view/split-view-header-actions.component.ts

Description

Slot for the buttons shown in the header of a split view list.

Place it inside c8y-sv-list. The actions align to the right of the title, or take the full header width when the list hides its title.

Example :

<c8y-sv-list [title]="'Devices'">
  <c8y-sv-header-actions>
    <button class="btn btn-default btn-sm" (click)="refresh()">Refresh</button>
  </c8y-sv-header-actions>
</c8y-sv-list>

Example

<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;c8y-sv-list [title]=&quot;&#39;Devices&#39;&quot;&gt;
  &lt;c8y-sv-header-actions&gt;
    &lt;button class=&quot;btn btn-default btn-sm&quot; (click)=&quot;refresh()&quot;&gt;Refresh&lt;/button&gt;
  &lt;/c8y-sv-header-actions&gt;
&lt;/c8y-sv-list&gt;</code></pre></div>

Metadata

changeDetection	`ChangeDetectionStrategy.Eager`
host	`{ }`
selector	`c8y-sv-header-actions`
standalone	`true`
imports	`NgClass`
templateUrl	`./split-view-header-actions.component.html`

Relationships

Used by

Depends on

NgClass

<div
  [ngClass]="{ 'd-flex a-i-center fit-w': !showTitle, 'm-l-auto': showTitle }"
  data-cy="c8y-sv-header-actions"
>
  <ng-content></ng-content>
</div>