Web SDK documentation
  1. Components
  2. TabsOutletComponent

File

core/tabs/tabs-outlet.component.ts

Implements

OnDestroy AfterContentInit

Metadata

selector c8y-tabs-outlet,c8y-ui-tabs
templateUrl ./tabs-outlet.component.html

Index

Properties
Methods
Inputs
HostBindings
Accessors

Constructor

constructor(router: Router, renderer: Renderer2, el: ElementRef, header: HeaderService)
Parameters :
Name Type Optional
router Router No
renderer Renderer2 No
el ElementRef No
header HeaderService No

Inputs

navigatorOpen
Type : boolean
Default value : false
orientation
Type : "vertical" | "horizontal"
Default value : 'vertical'
tabs
Type : any[]
Default value : []

HostBindings

class.navigator-open
Type : boolean
class.page-tabs
Type : boolean
class.page-tabs-horizontal
Type : boolean
class.page-tabs-vertical
Type : boolean

Methods

isActive
isActive(tab: Tab)
Parameters :
Name Type Optional
tab Tab No
Returns : any
navigateTo
navigateTo(path)
Parameters :
Name Optional
path No
Returns : void
ngAfterContentInit
ngAfterContentInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
scroll
scroll(direction: "right" | "left")
Parameters :
Name Type Optional Default value
direction "right" | "left" No 'right'
Returns : void

Properties

showLeft
Type : boolean
Default value : false
showRight
Type : boolean
Default value : false

Accessors

isNavigatorOpen
getisNavigatorOpen()
hasTabs
gethasTabs()
isHorizontal
getisHorizontal()
isVertical
getisVertical() 
<div #container class="tabContainer hidden-xs">
  <button class="tabs-slider tabs-slider-left" #left *ngIf="showLeft" (click)="scroll('left')">
    <i [c8yIcon]="'chevron-left'"></i>
  </button>
  <button class="tabs-slider tabs-slider-right" #right *ngIf="showRight" (click)="scroll('right')">
    <i [c8yIcon]="'chevron-right'"></i>
  </button>
  <ul class="nav nav-tabs nav-tabsc8y" #tabsContainer>
    <ng-container *ngFor="let tab of tabs">
      <li [ngClass]="{ active: rla?.isActive }" *ngIf="!tab.component">
        <a
          [routerLink]="tab.path"
          routerLinkActive
          #rla="routerLinkActive"
          title="{{ tab?.label | translate }}"
        >
          <i [c8yIcon]="tab?.icon" *ngIf="!tab.template && tab?.icon"></i>
          <span class="txt" *ngIf="!tab.template && !tab.component">
            {{ tab?.label | translate }}
          </span>
        </a>
        <ng-container *ngTemplateOutlet="tab.template; injector: tab.injector"></ng-container>
      </li>
      <ng-container *ngComponentOutlet="tab.component; injector: tab.injector"></ng-container>
    </ng-container>
  </ul>
</div>

<div class="visible-xs mobile-tabs">
  <ul class="list-unstyled d-flex m-b-0">
    <li class="c8y-select-wrapper flex-grow">
      <select (change)="navigateTo($event.target)" #select>
        <ng-container *ngFor="let tab of tabs">
          <option *ngIf="!tab.component" [value]="tab.path" [selected]="isActive(tab)">
            {{ tab?.label | translate }}
          </option>
        </ng-container>
      </select>
    </li>
    <ng-container *ngFor="let tab of tabs">
      <ng-container *ngIf="tab.component">
        <ng-container *ngComponentOutlet="tab.component; injector: tab.injector"></ng-container>
      </ng-container>
    </ng-container>
  </ul>
</div>

results matching ""

    No results matching ""