<div class="row">
<div class="col-xs-12 col-md-7">
<div class="form-group">
<label for="toastr-title">Title</label>
<input id="toastr-title" name="toastr-title" type="text" class="form-control" placeholder="Enter a title...">
</div>
<div class="form-group">
<label for="toastr-message">Message</label>
<input id="toastr-message" name="toastr-message" type="text" class="form-control" placeholder="Enter a message...">
</div>
<div class="form-group">
<label for="toastr-type">Type</label>
<select class="custom-select form-control" id="toastr-type" name="toastr-type">
<option value="success" selected>Success</option>
<option value="info">Info</option>
<option value="warning">Warning</option>
<option value="error">Error</option>
</select>
</div>
<div class="form-group">
<label class="custom-control custom-checkbox" for="toastr-close-button">
<input type="checkbox" id="toastr-close-button" class="custom-control-input">
<span class="custom-control-indicator"></span>
Close button
</label>
<label class="custom-control custom-checkbox" for="toastr-progress-bar">
<input type="checkbox" id="toastr-progress-bar" class="custom-control-input">
<span class="custom-control-indicator"></span>
Progress bar
</label>
<label class="custom-control custom-checkbox" for="toastr-prevent-duplicates">
<input type="checkbox" id="toastr-prevent-duplicates" class="custom-control-input">
<span class="custom-control-indicator"></span>
Prevent duplicates
</label>
<label class="custom-control custom-checkbox" for="toastr-newest-on-top">
<input type="checkbox" id="toastr-newest-on-top" class="custom-control-input">
<span class="custom-control-indicator"></span>
Newest on top
</label>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Position</label>
<label class="custom-control custom-radio">
<input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-right" checked>
<span class="custom-control-indicator"></span>
Top Right
</label>
<label class="custom-control custom-radio">
<input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-right">
<span class="custom-control-indicator"></span>
Bottom Right
</label>
<label class="custom-control custom-radio">
<input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-left">
<span class="custom-control-indicator"></span>
Bottom Left
</label>
<label class="custom-control custom-radio">
<input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-left">
<span class="custom-control-indicator"></span>
Top Left
</label>
<label class="custom-control custom-radio">
<input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-full-width">
<span class="custom-control-indicator"></span>
Top Full Width
</label>
<label class="custom-control custom-radio">
<input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-full-width">
<span class="custom-control-indicator"></span>
Bottom Full Width
</label>
<label class="custom-control custom-radio">
<input type="radio" name="toastr-position" class="custom-control-input" value="toast-top-center">
<span class="custom-control-indicator"></span>
Top Center
</label>
<label class="custom-control custom-radio">
<input type="radio" name="toastr-position" class="custom-control-input" value="toast-bottom-center">
<span class="custom-control-indicator"></span>
Bottom Center
</label>
</div>
</div>
</div>
<hr>
<button class="btn btn-primary m-r-1" id="toastr-show">Show toast</button>
<button class="btn m-r-1" id="toastr-clear">Clear toasts</button>
<div class="text-muted m-t-1 pull-md-right">See full example at <a href="http://codeseven.github.io/toastr/demo.html">http://codeseven.github.io/toastr/demo.html</a></div>
<script>
$(function() {
var curMsgIndex = -1;
function getMessage() {
var msgs = [
'My name is Inigo Montoya. You killed my father. Prepare to die!',
'<div><input class="form-control input-sm" value="textbox"/> <a href="http://johnpapa.net" target="_blank">This is a hyperlink</a></div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="surpriseBtn" class="btn" style="margin: 0 8px 0 8px">Surprise me</button></div>',
'Are you the six fingered man?',
'Inconceivable!',
'I do not think that means what you think it means.',
'Have fun storming the castle!',
];
curMsgIndex++;
if (curMsgIndex === msgs.length) { curMsgIndex = 0; }
return msgs[curMsgIndex];
};
$('#toastr-show').click(function() {
var msg = $('#toastr-message').val() || getMessage();
var title = $('#toastr-title').val() || '';
var type = $('#toastr-type').val();
toastr[type](msg, title, {
positionClass: $('input[name="toastr-position"]:checked').val(),
closeButton: $('#toastr-close-button').prop('checked'),
progressBar: $('#toastr-progress-bar').prop('checked'),
preventDuplicates: $('#toastr-prevent-duplicates').prop('checked'),
newestOnTop: $('#toastr-newest-on-top').prop('checked'),
});
});
$('#toastr-clear').on('click', function() {
toastr.clear();
});
});
</script>require(['jquery', 'px-libs/toastr'], function($, toastr) {
...
});To use toastr plugin, you need to include the next scripts:
<script src="path/to/js/libs/toastr.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-toastr.js"></script>Then inject the plugin into your angular application:
angular.module('yourApp', ['toastr']);Alternatively, you can include toastr plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'toastr',
files: [
'path/to/js/libs/toastr.js',
'path/to/js/pixeladmin/directives/angular-toastr.js',
],
},
]);$toastr service
Inject $toastr service into a controller to create notifications.
By default it comes with eight methods (see the
plugin's documentation):
<div ng-app="ngToastrApp" ng-controller="ngToastrAppCtrl as ctrl">
<button class="btn btn-success" ng-click="ctrl.success()">Success</button>
<button class="btn btn-danger" ng-click="ctrl.error()">Error</button>
<button class="btn btn-info" ng-click="ctrl.info()">Info</button>
<button class="btn btn-warning" ng-click="ctrl.warning()">Warning</button>
|
<button class="btn btn-default" ng-click="ctrl.clear()">Clear</button>
</div>
<!-- Load scripts -->
<!-- <script src="assets/js/angular/libs/toastr.js"></script> -->
<script src="assets/js/angular/pixeladmin/directives/angular-toastr.js"></script>
<script>
angular.module('ngToastrApp', [ 'toastr' ])
.controller('ngToastrAppCtrl', function($toastr) {
this.success = function() { $toastr.success('Some notification text.', 'Success Title', { closeButton: true }); };
this.error = function() { $toastr.error('Some notification text.', 'Danger Title', { closeButton: true }); };
this.info = function() { $toastr.info('Some notification text.', 'Info Title', { closeButton: true }); };
this.warning = function() { $toastr.warning('Some notification text.', 'Warning Title', { closeButton: true }); };
this.clear = function() { $toastr.clear(); };
});
</script>