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.
OnInit
OnDestroy
| host | { |
| selector | c8y-action-bar |
| templateUrl | ./action-bar.component.html |
Properties |
Methods |
Inputs |
HostBindings |
HostListeners |
constructor(gainsightService: GainsightService)
|
||||||
|
Parameters :
|
| hasHeader |
Type : boolean
|
Default value : false
|
|
Identifies if the current view has a header element. |
| 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 |
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"
role="presentation"
>
<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
class="navbar-collapse"
id="page-toolbar"
role="complementary"
>
<ul class="nav navbar-nav navbar-left gap-sm-8 p-l-sm-16 p-l-lg-0">
<ng-container *ngFor="let item of left$ | async">
<ng-container
*c8yOutlet="item.component || item.template; injector: item.injector"
></ng-container>
</ng-container>
</ul>
<ul class="nav navbar-nav navbar-right gap-sm-8">
<ng-container *ngFor="let item of right$ | async">
<ng-container
*c8yOutlet="item.component || item.template; injector: item.injector"
></ng-container>
</ng-container>
<li *ngIf="(more$ | async).length === 1; else moreWithMultipleOptions">
<ng-container *ngFor="let item of more$ | async">
<ng-container
*c8yOutlet="item.component || item.template; injector: item.injector"
></ng-container>
</ng-container>
</li>
<ng-template #moreWithMultipleOptions>
<li
class="no-remove more-wrapper"
*ngIf="(more$ | async).length > 1"
>
<div
class="dropdown"
dropdown
>
<c8y-action-bar-item
[placement]="'right'"
>
<button
class="dropdown-toggle c8y-dropdown d-flex"
title="{{ 'More…' | translate }}"
aria-haspopup="true"
type="button"
dropdownToggle
data-cy="action-bar--button-more"
>
<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.component || item.template; injector: item.injector"
></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.component || item.template; injector: item.injector"
></ng-container>
</ng-container>
</ul>
</c8y-action-bar-item>
</div>
</li>
</ng-template>
</ul>
</div>