Rb-toolbar NPM

Waterfall Flexible Toolbar for Angular Material app

Donation

Demo

Note: It is compatible only with Angular >= 6
Step 1: Install rb-toolbar and Angular Material

NPM

npm install --save rb-toolbar
npm install --save @angular/material @angular/cdk

Import RbToolbarModule into usage Module.

/*----  src/app/app.module.ts     -----*/
import { RbToolbarModule } from 'rb-toolbar';

@NgModule({
  ...
  imports: [
   RbToolbarModule
  ],
  ...
})
export class AppModule.ts { }

Step 2: Usage

Use the rbToolbar directiava within the mat-toolbar component of @angular/material (recommended), then place the maximum height in the [maxHeight] property (if you omit it will be worth 224) and place the url of the background image in the property [bgImage] (if you omit a google image is implemented).

<mat-toolbar color="primary" rbToolbar maxHeight="224" bgImage="/img/myimg.jpg">
  <span>Hello World</span>
</mat-toolbar>
<main style.marginTop="224px">
  <!-- your main content... -->
</main>

Properties of `rbToolbar` directive

Name	Description
@Input() maxHeight: `number`	maximum height of the toolbar.
@Input() bgImage: `string`	url of the background image
@Output() ratio: EventEmitter `<number>`	Event emitted ratio from 0 to 1, precision of 3 decimals