Alert

The alert component displays a SKY UX-themed Bootstrap alert. It includes an option to let users dismiss the alert with a close button. For information about the Bootstrap alert, see the Bootstrap documentation.

Alert settings

  • bb-alert — Creates a SKY UX-themed Bootstrap alert.
    • bb-alert-type — Specifies a style for the alert. The valid options are success, info, warning, and danger. (Default: warning)
    • bb-alert-closeable(Optional.) Specifies a Boolean value to indicate whether users can dismiss the alert. (Default: false)
    • bb-alert-closed(Optional.) For alerts that are closeable, indicates whether the alert is closed. (Default: false)

Demo

This is a sample alert.

To re-open the alert, click here.

Markup

<div ng-controller="AlertTestController as alertCtrl">
  <bb-alert bb-alert-type="{{alertCtrl.alertType}}" bb-alert-closeable="{{alertCtrl.closeable}}" bb-alert-closed="alertCtrl.alertClosed">
    This is a sample alert.
  </bb-alert>
  <p ng-show="alertCtrl.alertClosed">
    To re-open the alert, <a style="cursor: pointer;" ng-click="alertCtrl.openAlert()">click here</a>.
  </p>
  <div class="form-group">
    <label>
      Alert type
      <select class="form-control" ng-model="alertCtrl.alertType">
        <option>info</option>
        <option>success</option>
        <option>warning</option>
        <option>danger</option>
      </select>
    </label>
  </div>
  <div class="form-group">
    <label>
      <input type="checkbox" bb-check ng-model="alertCtrl.closeable" /> Closeable
    </label>
  </div>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function AlertTestController() {
        var vm = this;

        vm.alertType = 'warning';

        vm.openAlert = function () {
            vm.alertClosed = false;
            return false;
        };
    }

    angular.module('stache')
        .controller('AlertTestController', AlertTestController);
}());