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 |
hasTabs
|
Identifies if the current view has tabs. If yes, the action bar needs to move down.
Default value : |
isTabsHorizontal
|
Identifies if the tabs are aligned horizontally. If yes, the tabs don't need to move to the left.
Default value : |
items
|
The current items to display in the ActionBar.
Type :
Default value : |
navigatorOpen
|
Identifies if the navigator is opened. If yes, the action-bar needs to move to the right.
Default value : |
| class.c8y-ui-action-bar |
class.c8y-ui-action-bar:
|
Default value : true
|
|
Adds the default |
| hidden |
hidden:
|
|
Returns true if no items are present and hides the action bar. |
| getSortedItems | ||||||
getSortedItems(placement: "left" | "right" | "more")
|
||||||
|
Returns the items sorted by priority and grouped by the placement passed.
Parameters :
Returns :
any
|
| isPageToolbarExpanded |
isPageToolbarExpanded:
|
Default value : false
|
|
Identifies if in a mobile view the toolbar is expanded or not. |
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
(click)="isPageToolbarExpanded = !isPageToolbarExpanded"
>
<span class="sr-only" translate>Toggle toolbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="page-toolbar" class="navbar-collapse" [collapse]="!isPageToolbarExpanded">
<ul class="nav navbar-nav navbar-left">
<ng-container *ngFor="let item of getSortedItems('left')">
<ng-container *c8yOutlet="item.template"></ng-container>
</ng-container>
</ul>
<ul class="nav navbar-nav navbar-right">
<ng-container *ngFor="let item of getSortedItems('right')">
<ng-container *c8yOutlet="item.template"></ng-container>
</ng-container>
<li class="no-remove more-wrapper" *ngIf="getSortedItems('more').length > 0">
<div class="dropdown" dropdown>
<button
title="{{ 'More' | translate }}…"
class="dropdown-toggle c8y-dropdown"
dropdownToggle
aria-haspopup="true"
aria-expanded="false"
>
<span translate>More…</span>
<i [c8yIcon]="'caret-down'"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<ng-container *ngFor="let item of getSortedItems('more')">
<ng-container *c8yOutlet="item.template"></ng-container>
</ng-container>
</ul>
<ul class="dropdown-menu visible-xs">
<ng-container *ngFor="let item of getSortedItems('more')">
<ng-container *c8yOutlet="item.template"></ng-container>
</ng-container>
</ul>
</div>
</li>
</ul>
</div>