Custom Ionic2 Components

Snackbar

I tried to make it simple.
Currently it depends from Ionic 2, because I'm using the ViewController to show and hide the snackbar.
Any idea to enhance, plz let me know.
Import and put the SnackbarManager in your providers list in the main file.

app.ts

import {SnackbarManager} from './components/snackbar/snackbar';
@App({
template: "<ion-nav [root]="rootPage"></ion-nav>",
providers: [SnackbarManager],
config: {}
})

Import the SnackbarManager and the Snackbar in your desired page file.

page1.ts

import {SnackbarManager, Snackbar} from '../../components/snackbar/snackbar';

Inject the SnackbarManager in constructor

constructor(private nav: NavController, private mng: SnackbarManager) {
}

Call it using:

let snackbar = new Snackbar({
   message: 'Test Message',
   action: {
       text: "UNDO",
       handler: () => {
           alert("UNDO");
       }
   }
});
this.mng.show(this.nav, snackbar);

Toolbar Scroll

I wanted something like the coordinator layout in native android applications.
I created to use in an own project. So, it has some fixed values like some heights, positions..etc.
If the user scroll fast on device, might occur some flickers. When the user scrolls on device has a little delay to call the scroll handler and I don't know why =/
If this issue has a solution, plz tell me =)

Import the toolbar.scss in your theme. //TODO: Use the style property inside the component

In your page put the directive and give an id to ion-content

• mainColor - The color of the toolbar
  • toolbar - It will get the color that you define in your
  • image - It will get the main color of the image
• contentId - the id that you give for your content

toolbar.html

<toolbar mainColor="toolbar" contentId="toolbar-example">
<img src="./img/pao.jpg">
<ion-toolbar primary>
<ion-buttons left>
<button>
<ion-icon name="arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-title>Ionic Title</ion-title>
<ion-buttons end>
<button>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<button fab primary fab-bottom fab-right>
<ion-icon name="add"></ion-icon>
</button>
</toolbar>