Action Bar

Action bar is interface design like Microsoft Ribbon for usage on web application.

Installing

Install using NPM:

npm i @actual-it/action-bar

Import module:

...
import { ActionBarModule } from '@actual-it/action-bar';

@NgModule({
    ...,
    imports: [
        ...,
        ActionBarModule
    ],
    exports: [
        ...,
        ActionBarModule
    ],
    ...
})
export class CommonModule {

}

Import scss:

@import "~@actual-it/action-bar/src/styles/action-bar.component";

Configuration

Inject ActionBarConfig:

...
import { ActionBarConfig } from '@actual-it/action-bar';

@NgModule({
    ...
})
export class TestModule {
    constructor(actionBarConfig: ActionBarConfig) {
        actionBarConfig.collapsible = false;
        actionBarConfig.hasPermissions = item => {
            return true;
        };
    }
}

Usage

<cng-action-bar [items]="items"></cng-action-bar>

TODO

• [ ] Sticky ActionBar
• [ ] Show items on hover when collapsed