ion-snackbar

ion-snackbar

Material Design Snackbar for Mobile and Tablet

Free!

Not yet rated
Flavio Colonna Romano

Flavio Colonna Romano

Member since 2015

Details

Version:
1.0
Size:
0mb
Ionic:
1.0.x
Platforms:
iOS, Android, Windows Phone
Released:
8 years ago
Updated:
7 years ago
Category:
Plugins
Tags:
Snackbar, toasts, notification, material, design, mobile, tablet

ion-snackbar

Example

View example in my Plunker Desk

Visit the component page on Github to get the latest version and to submit bugs.

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 :heart:

Hey there! You'll need to log in before you can leave a comment here.

David

David   ·   7 years ago

Hi, nice work. Do you have a GitHUB repo for this project? I ask because I don't want to download files every time something is changed. Instead I want to track the version in my bower file.

Flavio Colonna Romano

Flavio Colonna Romano   ·   7 years ago

Hi David! I am sorry for my delay but I was on holidays :) . First of all thank you very much for telling me I did a nice work. Actually I have to create the github and I will do it sooner. I will update the plugin with the new github link. Furthermore I will implement three levels of timing as Short, Long, Indeterminate to manage the showing of the snackbar. I will keep you updated!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

David

David   ·   7 years ago

OK, just created a repo for testing: https://github.com/didlich/ion-snackbar

Flavio Colonna Romano

Flavio Colonna Romano   ·   7 years ago

Hi David! As you have seen in the description I have created the new Github page. Enjoy!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Atif Qayyum

Atif Qayyum   ·   7 years ago

I tried using it in my project. But this shows up in console ionic.bundle.js:19346 GET http://localhost:8100/snackbar.html 404 (Not Found) Error getting html template {"data":"Cannot GET /snackbar.html\n","status":404,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"./snackbar.html","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"Not Found"} And when I call the show toast function, this shows up TypeError: Cannot read property 'nodeType' of undefined at stripCommentsFromElement (ionic.bundle.js:37305) Please suggest the solution

Flavio Colonna Romano

Flavio Colonna Romano   ·   7 years ago

Hi! Just update into the snackbar.js file, the line where there is the snackbar.html call. You have to set the correct path.

Atif Qayyum

Atif Qayyum   ·   7 years ago

Thanks a lot man ;)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Atif Qayyum

Atif Qayyum   ·   7 years ago

I tried using it in my project. But this shows up in console ionic.bundle.js:19346 GET http://localhost:8100/snackbar.html 404 (Not Found) Error getting html template {"data":"Cannot GET /snackbar.html\n","status":404,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"./snackbar.html","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"Not Found"} And when I call the show toast function, this shows up TypeError: Cannot read property 'nodeType' of undefined at stripCommentsFromElement (ionic.bundle.js:37305) Please suggest the solution

Flavio Colonna Romano

Flavio Colonna Romano   ·   7 years ago

Hi! Just update into the snackbar.js file, the line where there is the snackbar.html call. You have to set the correct path.

Atif Qayyum

Atif Qayyum   ·   7 years ago

Thanks a lot man ;)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

David

David   ·   7 years ago

OK, just created a repo for testing: https://github.com/didlich/ion-snackbar

Flavio Colonna Romano

Flavio Colonna Romano   ·   7 years ago

Hi David! As you have seen in the description I have created the new Github page. Enjoy!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

David

David   ·   7 years ago

Hi, nice work. Do you have a GitHUB repo for this project? I ask because I don't want to download files every time something is changed. Instead I want to track the version in my bower file.

Flavio Colonna Romano

Flavio Colonna Romano   ·   7 years ago

Hi David! I am sorry for my delay but I was on holidays :) . First of all thank you very much for telling me I did a nice work. Actually I have to create the github and I will do it sooner. I will update the plugin with the new github link. Furthermore I will implement three levels of timing as Short, Long, Indeterminate to manage the showing of the snackbar. I will keep you updated!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in before you can leave a rating here.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}