Web SDK documentation
  1. Components
  2. ActionBarComponent

File

core/action-bar/action-bar.component.ts

Description

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.

Implements

OnInit OnDestroy

Metadata

host {
}
selector c8y-action-bar
templateUrl ./action-bar.component.html

Index

Properties
Methods
Inputs
HostBindings
HostListeners

Constructor

constructor(gainsightService: GainsightService)
Parameters :
Name Type Optional
gainsightService GainsightService No

Inputs

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.

HostBindings

class.c8y-ui-action-bar
Type : boolean
Default value : true

Adds the default c8y-ui-action-bar class.
hidden
Type : boolean
Default value : true

Binds hidden property to this component's native element

HostListeners

mousedown
Arguments : '$event.target'
mousedown(event: HTMLElement)

Methods

mouseDown
mouseDown(event: HTMLElement)
Decorators :
@HostListener('mousedown', ['$event.target'])
Parameters :
Name Type Optional
event HTMLElement No
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

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 c8y-ui-action-bar class.

 
<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.component || item.template; injector: item.injector"></ng-container>
    </ng-container>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <ng-container *ngFor="let item of right$ | async">
      <ng-container *c8yOutlet="item.component || item.template; injector: item.injector"></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.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>
      </div>
    </li>
  </ul>
</div>

results matching ""

    No results matching ""