core/action-bar/action-bar.component.ts
This component is used as the outlet to show the action bars. In a c8ycli app it is by default placed on the bootstrap component.
| host | { |
| selector | c8y-action-bar |
| templateUrl | ./action-bar.component.html |
Properties |
Methods |
Inputs |
HostBindings |
HostListeners |
constructor(gainsightService: GainsightService)
|
||||||
|
Parameters :
|
| hasTabs |
Type : boolean
|
Default value : false
|
|
Identifies if the current view has tabs. If yes, the action bar needs to move down. |
| isTabsHorizontal |
Type : boolean
|
Default value : false
|
|
Identifies if the tabs are aligned horizontally. If yes, the tabs don't need to move to the left. |
| items$ |
Type : Observable<ActionBarItem[]>
|
Default value : of([])
|
|
The current items to display in the ActionBar. |
| navigatorOpen |
Type : boolean
|
Default value : false
|
|
Identifies if the navigator is opened. If yes, the action-bar needs to move to the right. |
| class.c8y-ui-action-bar |
Type : boolean
|
Default value : true
|
|
Adds the default |
| hidden |
Type : boolean
|
Default value : true
|
|
Binds hidden property to this component's native element |
| mousedown |
Arguments : '$event.target'
|
mousedown(event: HTMLElement)
|
| mouseDown | ||||||
mouseDown(event: HTMLElement)
|
||||||
Decorators :
@HostListener('mousedown', ['$event.target'])
|
||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| hidden |
Type : boolean
|
Default value : true
|
Decorators :
@HostBinding()
|
|
Binds hidden property to this component's native element |
| hidden$ |
Type : Observable<boolean>
|
Default value : of(true)
|
|
Returns true if no items are present and hides the action bar. |
| isPageToolbarExpanded |
Default value : false
|
|
Identifies if in a mobile view the toolbar is expanded or not. |
| left$ |
Type : Observable<ActionBarItem[]>
|
Default value : of([])
|
|
Provides observable for left action items. |
| more$ |
Type : Observable<ActionBarItem[]>
|
Default value : of([])
|
|
Provides observable for more action items. |
| right$ |
Type : Observable<ActionBarItem[]>
|
Default value : of([])
|
|
Provides observable for right action items. |
| uiActionBar |
Default value : true
|
Decorators :
@HostBinding('class.c8y-ui-action-bar')
|
|
Adds the default |
<div class="navbar-header">
<p class="text-label-small p-l-16 p-t-8 p-b-8 visible-xs">
<span class="text-primary">{{ 'Action bar' | translate }}</span>
</p>
</div>
<div id="page-toolbar" class="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<ng-container *ngFor="let item of left$ | async">
<ng-container *c8yOutlet="item.template"></ng-container>
</ng-container>
</ul>
<ul class="nav navbar-nav navbar-right">
<ng-container *ngFor="let item of right$ | async">
<ng-container *c8yOutlet="item.template"></ng-container>
</ng-container>
<li class="no-remove more-wrapper" *ngIf="(more$ | async).length > 0">
<div class="dropdown" dropdown>
<button
title="{{ 'More' | translate }}…"
class="dropdown-toggle c8y-dropdown d-flex"
dropdownToggle
aria-haspopup="true"
aria-expanded="false"
>
<span class="text-truncate" translate>More…</span>
<i [c8yIcon]="'caret-down'"></i>
</button>
<ul class="dropdown-menu visible-xs">
<ng-container *ngFor="let item of more$ | async">
<ng-container *c8yOutlet="item.template"></ng-container>
</ng-container>
</ul>
<ul class="dropdown-menu dropdown-menu-right hidden-xs" *dropdownMenu>
<ng-container *ngFor="let item of more$ | async">
<ng-container *c8yOutlet="item.template"></ng-container>
</ng-container>
</ul>
</div>
</li>
</ul>
</div>