Toast Web

Posted by On 5月 03, 2016 0 Comment

Toast

Toast is notification using in Android.
Android toast is default UI, show short message on the top layer.
(Android toast is alive even if application died).

toastr

toastr is simple library for
toast.
Change
The color and style is based on bootstrap.
jQuery is dependency.

bower

If you are using bower, it’s simple to install

bower install toastr --save

toastr prepares bower, npm, etc…

How to use it!

This is a sample for toastr

<html>
<head>
	<title>Toast</title>
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="bower_components/toastr/toastr.min.css">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/toastr/toastr.min.js"></script>
  <script src="js/toast.js"></script>
</head>
<body ng-app="appModule" ng-controller="appController">
<div class="container">
	<div><button ng-click="open()">Toast</button></div>
</div>
</body>
</html>

toast.js

var app = angular.module('appModule', []);

app.controller('appController', function($scope){

	toastr.options.preventDuplicates = true;
	toastr.options.newestOnTop = false;
	toastr.options.positionClass = "toast-top-center"

	$scope.open = function() {
		toastr.success('Goal!!!')
	};
});

Result

toast

TOPICS