dependencies dependencies cluster_ActionBarModule cluster_ActionBarModule_exports cluster_ActionBarModule_declarations cluster_ActionBarModule_imports ActionBarComponent ActionBarComponent ActionBarModule ActionBarModule ActionBarComponent->ActionBarModule ActionBarItemComponent ActionBarItemComponent ActionBarItemComponent->ActionBarModule ActionBarComponent ActionBarComponent ActionBarModule->ActionBarComponent ActionBarItemComponent ActionBarItemComponent ActionBarModule->ActionBarItemComponent CommonModule CommonModule CommonModule->ActionBarModule RouterModule RouterModule RouterModule->ActionBarModule

File

core/action-bar/action-bar.module.ts

Description

An action bar can be added with content projection or multi provider extension. It allows to show them in three positions (left, right or more). The actions placed here are always local actions to the current route like "add device" or "lock dashboard".

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" (click)="addRandom()"><i c8yIcon="plus-circle"></i> Add random</button>
</c8y-action-bar-item>

Action Bar Module

An action bar is usually an icon and a label which is at the top of the current view. It can be used to call for action. Components in this module are

  • c8y-action-bar-item -> Allows to set an action bar item on the current view.
  • c8y-action-bar -> The outlet which will display the action bars. Usually there is no need to use that.

Usage example

The component can be fully used by content projection in the template. A simple example is:

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" (click)="addRandom()"><i c8yIcon="plus-circle"></i> Add random</button>
</c8y-action-bar-item>

Due to content projection, anything can be placed inside the action-bar-item:

<c8y-action-bar-item [placement]="'left'" [priority]="100">
  <a href="http://cumulocity.com">Check out our Website</a>
</c8y-action-bar-item>

For complex cases the multi provider concept can be used (e.g. if you only want to add it to certain routes):

providers: [
  {
    provide: HOOK_ACTION_BAR,
    useValue: [{ template: SomeComponent, priority: 10, placement: 'left' } as ActionBarItem], // alternative useClass: get() {}
    multi: true
  }
];

More complex examples can be found in the tutorial application:

npx @c8y/cli new myTutorialApp tutorial
cd myTutorialApp
npm install
npm start -- -u http://your-cumulocity-tenant.cumulocity.com

results matching ""

    No results matching ""