Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.

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);

}());