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

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

Default value : false

orientation

Type : "vertical" | "horizontal"

Default value : 'vertical'

tabs

Type : any[]

Default value : []

HostBindings

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

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
showLeft: boolean
Type : boolean
Default value : false
showRight
showRight: boolean
Type : boolean
Default value : false 
<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>
    <li [ngClass]="{'active': rla.isActive}" *ngFor="let tab of tabs">
      <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?.label | translate}}</span>
        <ng-container *ngTemplateOutlet="tab.template"></ng-container>
      </a>
    </li>
  </ul>
</div>

<div class="visible-xs mobile-tabs">
  <div class="c8y-select-wrapper">
    <select (change)="navigateTo($event.target.value)" #select>
      <option *ngFor="let tab of tabs" [value]="tab.path" [selected]="isActive(tab)">
        {{tab?.label | translate}}
      </option>
    </select>
  </div>
</div>

result-matching ""

    No results matching ""