Waterfall Flexible Toolbar for Angular Material app

Donation

Donations

Demo

RbToolbar

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|

License

MIT, see LICENSE.md for details.