leob
Tried it out, works well.
'ionictoast' bower component for ionic framework applications
##Introduction:
This is an ionic-toast
bower component which can be used with any Ionic framework's application.
##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
.
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.
##Versions:
The whole ionic-toast
component functionality has been implemented, and it can be installed with the command bower install ionic-toast --save
Bug Fix
##License: MIT
##Contact: gmail : rajeshwar.patlolla@gmail.com
github : https://github.com/rajeshwarpatlolla
twitter : https://twitter.com/rajeshwar_9032
facebook : https://www.facebook.com/rajeshwarpatlolla
paypal : rajeshwar.patlolla@gmail.com
Hey there! You'll need to log in before you can leave a comment here.
Tried it out, works well.
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.
the only problem i found was that it doesn't show when you are on a modal
I will check this issue @Visar
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.
Bookmarked!
On my side, everything works fine except that when showing from a modal, the toast cannot be closed by clicking on x.
@Vincent Crepin , did you check the demo page? It is working fine there.
@Vincent Crepin , did you check the demo page? It is working fine there.
On my side, everything works fine except that when showing from a modal, the toast cannot be closed by clicking on x.
Bookmarked!
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.
I will check this issue @Visar
the only problem i found was that it doesn't show when you are on a modal
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.
Tried it out, works well.
Hey there! You'll need to log in before you can leave a rating here.
Works well, I'm probably going to use it in my app.
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 :)
works well, easy to use but needs to involve more flexibility to change design, callback functions ..
Works great, smooth on iOS and Android, and it's easy to customize. Thanks for this Rajeshwar
this is great, thanks a lot!
couldnt get it to work well for me
Everything works, thank you!
Its easy and productive!!
Very easy to use!
Very easy to use!
Very easy to use!
Very easy to use.
{{ rating.comment }}
{{ rating.comment }}
Very easy to use.
Very easy to use!
Very easy to use!
Very easy to use!
Its easy and productive!!
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 :)
couldnt get it to work well for me
this is great, thanks a lot!
Works great, smooth on iOS and Android, and it's easy to customize. Thanks for this Rajeshwar
works well, easy to use but needs to involve more flexibility to change design, callback functions ..
Works well, I'm probably going to use it in my app.
Everything works, thank you!