ion-snackbar

Example

View example in my Plunker Desk

Description

The new type of Android notification in Ionic. This component is new in the material design and it is supposed to be an alternative of the Toasts. Its style is really simple but in the same time complicated if you want to follow the material design guidelines written in Google Material Design, as I did. This component is optimized both for mobile and tablet. You can customize message text, message color, button text, button color, button function and then, thanks to promises, you are able to detect when the Snackbar disappears in order to call your own function.

How to use:

Before use, replace MYPATH with the path you set to this lib (snackbar.html and snackbar-tablet.css):

function init() {
  if(!initialize) {
    $http({
      method: 'GET',
      url: 'MYPATH/snackbar.html'
    }).then(function(result) {
      var body = document.getElementsByTagName("body")[0];
      angular.element(body).append(result.data);
      snackbarContainer = document.getElementsByClassName('snackbar-wrapper')[0];
      initialize = true;
    }, function(err) {
      $log.log("Error getting html template", JSON.stringify(err))
      initialize = false;
    });
  }
}

Then load the javascript file of the snackbar and related stylesheet:

<link href="pathToLib/snackbar.css" rel="stylesheet" type="text/css"/>
<script src="pathToLib/snackbar.js"></script>

Then add snackbar into your module as a dependency:

var myapp = angular.module('myapp',['snackbar'])

Then add the service $snackbar to the controller on which you want to use the snackbar functions, and once your app is ready, call the init() function

myapp.controller("mycontroller", function($snackbar) {
    //App ready
    $snackbar.init();
})

Now let's see how to use properly the snackbar. To call the snackbar simply write this:

var options = {
    message: 'Hello World!',
    time: 'SHORT',
    buttonName: 'Close',
    messageColor: 'red',
    buttonColor: 'white',
    buttonFunction: helloWorld
}
$snackbar.show(options).then(function(value){
    console.log("Snackbar disappeared");
    // here you can call another function
})

/**
* Example of function you can call
*/
function helloWorld() {
    console.log("Hello world!")
}

In order to close the snackbar:

$snackbar.hide().

Here there are the options available for the 'show' function:

• message (compulsory)
• buttonName (optional)
• buttonColor (optional but default #a1c2fa)
• messageColor (optional but default WHITE)
• time (optional but default SHORT)
• buttonFunction (optional but default snackbar.hide())

The 'message' parameter inside the options object is compulsory and without it snackbar doesn't work, firing an exception. $snackbar it is also a promise so you can call:

$snackbar.show({message : 'hello'}).then(function(success){},function(error){})

to execute something after the snackbar disappears. Timing in snackbar is expressed by a string that could be ['SHORT','LONG','INDETERMINATE']; SHORT will be 3000 MS, LONG will be 8000 MS and INDETERMINATE will not close automatically the snackbar. When buttonName is not defined you will have a simple snackbar without button. Remember that usually snackbar allows multi-line in mobile but just one line in tablet. Don't put too large text in snackbar due to has not been created for that at the start.

Versions

• 1.2 (adds init() function in order to initialize the snackbar once)
• 1.1 (latest with snackbar tablet stylesheet injected via javascript)
• 1.0 (first commit with working snackbar)

Animation

Each animation use GPU acceleration to give a smoother movement, essential for hybrid apps like Ionic apps.

Dependecies

• Roboto font style
• Ng Animate

License

The code is licensed under MIT license. Check license.txt for further details.

Contacts

For any bug or improvement don't hesitate to contact me at my page here

DONE WITH ❤️