Ionic Fab Toolbar

Ionic Fab Toolbar

Material Design Fab Toolbar

$0.00

Arif Mammedov

Arif Mammedov

Member since 2015

Details

Version:
0.0.2
Ionic:
2.x  
Platforms:
iOS, Android  
Released:
5 years ago
Updated:
5 years ago
Category:
Plugins
Tags:
,

Version 0.0.2

Update:

  • now you can add button with icon and title, change color of button and close button on backdrop click

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 '../components/fab-toolbar/fab-toolbar';

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

For issues

https://github.com/ekhmoi/fab-toolbar