https://github.com/ekhmoi/fab-toolbar
https://github.com/ekhmoi/fab-toolbar
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ekhmoi/fab-toolbar
- Owner: ekhmoi
- Created: 2016-09-30T21:52:22.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T16:38:26.000Z (almost 2 years ago)
- Last Synced: 2024-11-13T00:33:07.045Z (6 months ago)
- Language: TypeScript
- Size: 8.24 MB
- Stars: 31
- Watchers: 5
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-ionic2-components - Fab Toolbar
- Awesome - Fab Toolbar
README
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
```
```
```
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
