Toast

The toast service can be used to launch toast in a consistent way in a Sky UX application. The service has a single method, bbToast.open used to launch a toast. Optionally include the ngAnimate module in the application for toasts to fade in and out.

Dependencies


Toast settings

  • message — Provides a basic string message for simple toasts.
  • templateUrl — URL for a template in the $templateCache. Used to provide an HTML template when displaying complex toasts. Cannot be combined with the message option.
  • controller — Used in conjunction with templateUrl. Specifies the name of a controller to apply to the template's scope.
  • resolve — Items that will be resolved and passed to the controller as locals.
  • toastType — Specifies a style for the toast. The valid options are success, info, warning, and danger. (Default: info)
  • timeout — Specifies the amount of time in milliseconds to display the toast message before it is automatically dismissed. Specifying a value of infinite will show the toast message until the user clicks the close button. (Default: 10000)

Demo

Default toast type (info)


Specific toast types

Markup

<div ng-controller="ToastTestController as toastCtrl">
  <h4>
    Default toast type (info)
  </h4>
  <button type="button" class="btn btn-default" ng-click="toastCtrl.openMessage()">Open simple message</button>
  <button type="button" class="btn btn-default" ng-click="toastCtrl.openTemplate()">Open templated content</button>
  <button type="button" class="btn btn-default" ng-click="toastCtrl.openMessageInfinite()">Open persistent message</button>
  <br />
  <h4>
    Specific toast types
  </h4>
  <button type="button" class="btn btn-default" ng-click="toastCtrl.openWithType('info')">Open info message</button>
  <button type="button" class="btn btn-default" ng-click="toastCtrl.openWithType('success')">Open success message</button>
  <button type="button" class="btn btn-default" ng-click="toastCtrl.openWithType('warning')">Open warning message</button>
  <button type="button" class="btn btn-default" ng-click="toastCtrl.openWithType('danger')">Open danger message</button>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function ToastTestController(bbToast, $templateCache) {
        var self = this;

        $templateCache.put('bbToast/samples/complexToast.html',
            '<div>' +
            'Open for <span>{{templateToastCtrl.timeOpen}}</span> seconds' +
            '</div>' +
            '<br />' +
            '<div>{{templateToastCtrl.message}} <a href="#">Link</a></div>');

        self.openMessage = function () {
            bbToast.open({ message: "A simple message in which <html> is ignored." });
        };

        self.openMessageInfinite = function () {
            bbToast.open({
                message: 'This message will remain visible until the user clicks the close button.',
                timeout: 'infinite'
            });
        };

        self.openTemplate = function () {
            bbToast.open({
                templateUrl: "bbToast/samples/complexToast.html",
                controller: 'TemplatedToastController as templateToastCtrl',
                resolve: {
                    message: function () {
                        return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo, massa ac sollicitudin vestibulum, nulla nulla faucibus.';
                    }
                }
            });
        };

        self.openWithType = function (toastType) {
            bbToast.open({
                message: "This is a message of type " + toastType,
                toastType: toastType
            });
        }
    }

    function TemplatedToastController($interval, message) {
        var self = this;

        self.timeOpen = 0;
        self.message = message;

        $interval(function () {
            self.timeOpen += 1;
        }, 1000);
    }

    ToastTestController.$inject = ['bbToast', '$templateCache'];
    TemplatedToastController.$inject = ['$interval', 'message'];

    angular.module('stache')
        .controller('ToastTestController', ToastTestController)
        .controller('TemplatedToastController', TemplatedToastController);

}());