Awesome

Version 0.0.2

fab-toolbar

A Material Design Fab Toolbar is Ionic v2 component which uses Ionic's fab buttons, buttons.

The floating action button can transform into a toolbar upon press or from a toolbar upon scroll. The toolbar can contain related actions, text and search fields, or any other items that would be useful at hand.

Usage

<fab-toolbar [position]="'left" [color]="'light'" [icon]="'more'" [enableBackdropDismiss]="'false'" [buttons]="buttons"></fab-toolbar>


buttons =  [
      {icon: 'mail', title: 'Mail', color: 'dark', handler: ()=> {console.log('close me')}},
      {icon: 'alarm', title: 'Alarm', color: 'dark', handler: ()=> {console.log('close me')}},
      {icon: 'laptop', title: 'Laptop', color: 'dark', handler: ()=> {console.log('dont close me'); return false}}
    ]

Options

color: string - color variable of the fab button
position: string - left or right
icon: string - icon of the fab button
enableBackdropDismiss: boolean - if false fab toolbar will stay open on click backdrop
buttons: Array<{icon?: string, title?: string, color?: string, handler?: function}> if handler will return false toolbar will not close

Install

Get files inside dist folder and copy to your project

starting from Ionic 2 RC0.0 (AoT) you should provide all components inside app.module.ts

import { FabToolbar } from '../pages/fab-toolbar/fab-toolbar';

@NgModule({
  declarations: [
    FabToolbar
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FabToolbar
  ]
})

##Demo

alt tag