ionic toast

ionic toast

'ionictoast' bower component for ionic framework applications

Free!

(12)
Rajeshwar

Rajeshwar

Member since 2014

Details

Version:
0.1.1
Size:
0mb
Ionic:
1.0 beta 14,1.0.0,1.0.1
Platforms:
iOS, Android
Released:
4 years ago
Updated:
4 years ago
Category:
Plugins
Tags:
ionic, toast

##Introduction:

This is an ionic-toast bower component which can be used with any Ionic framework's application.

View Demo

##Prerequisites.

1) node.js, bower and gulp.

##How to use:

1) In your project repository install the ionic-toast using bower

bower install ionic-toast --save

This will install the latest version released.

2) Then you can see the following directory structure see in your project folder

Give the path of style.css, and ionic-toast.js in your index.html file.

<link href="lib/ionic-toast/dist/style.css" rel="stylesheet"> 
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-toast/dist/ionic-toast.js"></script>

3) In your application module inject the dependency ionic-toast, in order to work with the ionic toast.

angular.module('mainModuleName', ['ionic', 'ionic-toast']){
 //
}

4) In your controller, inject 'ionicToast'.

.controller('HomeCtrl', ['$scope', 'ionicToast', function($scope, ionicToast) {
  //code here
}])

5) In your template you can use like below

<button class="button button-block" ng-click="showToast()">Show Toast at top with close</button>

6) In your controller you have to define a function like below to show the toast

$scope.showToast = function(){
<!-- ionicToast.show(message, position, stick, time); -->
  ionicToast.show('This is a toast at the top.', 'top', true, 2500);
};

The arguments are as follows. The order of arguments should not be changed.

a) message is the first argument, which takes any string message.

b) position is the second argument, which takes on of the three values(top, middle, bottom).

c) stick is the third argument, which takes either true or false.

  • If the value is true, the toast will not close automatically. It will be closed once you click on the close button.
  • If the value is true, the toast will close automatically, after the given time.

d) time is the fourth argument, which takes time in milliseconds. If the value is greater than 5000, then it will be considered as 5000(5 seconds) only.

7) In your controller you have to define a function like below to hide the toast

$scope.hideToast = function(){
  ionicToast.hide();
};

##Screen Shots:

Once you are successfully done with the above steps, you should be able to see the below screen shots. I have used three buttons here.

The first screen shot shows only the buttons before clicking on them. Once you click on the button you should see the remaining screen shots.

ionic-toast buttons ionic-toast top ionic-toast middle ionic-toast bottom

##Versions:

1) v0.1.0

The whole ionic-toast component functionality has been implemented, and it can be installed with the command bower install ionic-toast --save

1) v0.1.1

Bug Fix

##License: MIT

##Contact: gmail : [email protected]

github : https://github.com/rajeshwarpatlolla

twitter : https://twitter.com/rajeshwar_9032

facebook : https://www.facebook.com/rajeshwarpatlolla

paypal : [email protected]

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

leob

leob   ·   4 years ago

Tried it out, works well.

rui_silva450

rui_silva450   ·   4 years ago

I think you made a typo here: c) stick is the third ... close button. - If the value is FALSE(?), the toast will close automatically, after the given time.

Visar Hoxha

Visar Hoxha   ·   3 years ago

the only problem i found was that it doesn't show when you are on a modal

Rajeshwar

Rajeshwar   ·   3 years ago

I will check this issue @Visar

Rajeshwar

Rajeshwar   ·   3 years ago

Please don't rate this plugin, if you are not aware how to use. See the documentation and try it. There are so many people using it, if one person doesn't know how to use it, it doesn't mean that this plugin doesn't work. If you really find an issue, then add proper comments here or raise a bug in github.

Jodie

Jodie   ·   3 years ago

Bookmarked!

Vincent Crepin

Vincent Crepin   ·   3 years ago

On my side, everything works fine except that when showing from a modal, the toast cannot be closed by clicking on x.

Rajeshwar

Rajeshwar   ·   3 years ago

@Vincent Crepin , did you check the demo page? It is working fine there.

  ·   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.

Rajeshwar

Rajeshwar   ·   3 years ago

@Vincent Crepin , did you check the demo page? It is working fine there.

Vincent Crepin

Vincent Crepin   ·   3 years ago

On my side, everything works fine except that when showing from a modal, the toast cannot be closed by clicking on x.

Jodie

Jodie   ·   3 years ago

Bookmarked!

Rajeshwar

Rajeshwar   ·   3 years ago

Please don't rate this plugin, if you are not aware how to use. See the documentation and try it. There are so many people using it, if one person doesn't know how to use it, it doesn't mean that this plugin doesn't work. If you really find an issue, then add proper comments here or raise a bug in github.

Rajeshwar

Rajeshwar   ·   3 years ago

I will check this issue @Visar

Visar Hoxha

Visar Hoxha   ·   3 years ago

the only problem i found was that it doesn't show when you are on a modal

rui_silva450

rui_silva450   ·   4 years ago

I think you made a typo here: c) stick is the third ... close button. - If the value is FALSE(?), the toast will close automatically, after the given time.

leob

leob   ·   4 years ago

Tried it out, works well.

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

leob   ·     ·   4 years ago

Works well, I'm probably going to use it in my app.

Deumier Stéphan   ·     ·   4 years ago

Works well, for my use I change the bottom to 40px in ionic_toast_bottom because it overlaps the tab-bar overwise, I will be using it thanks :)

sana_moussa   ·     ·   4 years ago

works well, easy to use but needs to involve more flexibility to change design, callback functions ..

zak red   ·     ·   4 years ago

Works great, smooth on iOS and Android, and it's easy to customize. Thanks for this Rajeshwar

Nguyễn Minh Hoàng   ·     ·   3 years ago

this is great, thanks a lot!

yousuf   ·     ·   3 years ago

couldnt get it to work well for me

Alexander Vasyuk   ·     ·   3 years ago

Everything works, thank you!

Fyroz Dadapeer   ·     ·   3 years ago

Its easy and productive!!

Andres Herrera Garcia   ·     ·   3 years ago

Very easy to use!

Andres Herrera Garcia   ·     ·   3 years ago

Very easy to use!

Andres Herrera Garcia   ·     ·   3 years ago

Very easy to use!

Andres Herrera Garcia   ·     ·   3 years ago

Very easy to use.

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Andres Herrera Garcia    ·     ·   3 years ago

Very easy to use.

Andres Herrera Garcia    ·     ·   3 years ago

Very easy to use!

Andres Herrera Garcia    ·     ·   3 years ago

Very easy to use!

Andres Herrera Garcia    ·     ·   3 years ago

Very easy to use!

Fyroz Dadapeer    ·     ·   3 years ago

Its easy and productive!!

Deumier Stéphan    ·     ·   4 years ago

Works well, for my use I change the bottom to 40px in ionic_toast_bottom because it overlaps the tab-bar overwise, I will be using it thanks :)

yousuf    ·     ·   3 years ago

couldnt get it to work well for me

Nguyễn Minh Hoàng    ·     ·   3 years ago

this is great, thanks a lot!

zak red    ·     ·   4 years ago

Works great, smooth on iOS and Android, and it's easy to customize. Thanks for this Rajeshwar

sana_moussa    ·     ·   4 years ago

works well, easy to use but needs to involve more flexibility to change design, callback functions ..

leob    ·     ·   4 years ago

Works well, I'm probably going to use it in my app.

Alexander Vasyuk    ·     ·   3 years ago

Everything works, thank you!