Summary action bar

The summary action bar contains actions and a responsive summary section.

Summary action bar settings

  • bb-summary-actionbar — Specifies the container for the actions and summary.
    • bb-summary-actionbar-actions — Specifies the container for the actions.
      • bb-summary-actionbar-primary — Specifies a primary action button.
        • bb-summary-action-disabled(Optional.) Specifies whether the action should be disabled.
        • bb-summary-action-click(Optional.) Specifies a callback that will be executed when the action is clicked.
      • bb-summary-actionbar-secondary-actions — Specifies the container for secondary actions. When more than 2 secondary actions exist, or on small screens, the secondary actions become a dropdown.
        • bb-summary-actionbar-secondary — Specifies a secondary action button.
          • bb-summary-action-disabled(Optional.) Specifies whether the action should be disabled.
          • bb-summary-action-click(Optional.) Specifies a callback that will be executed when the action is clicked.
      • bb-summary-actionbar-cancel — Specifies a cancel action button.
        • bb-summary-action-disabled(Optional.) Specifies whether the action should be disabled.
        • bb-summary-action-click(Optional.) Specifies a callback that will be executed when the action is clicked.
    • bb-summary-actionbar-summary — Specifies the container for the summary section.

Demo

Primary action Secondary action Secondary action 2 Cancel
$123.00 Field 1 $456.00 Field 2 18 Field 3 $123.00 Field 1 $456.00 Field 2 18 Field 3 $123.00 Field 1 $456.00 Field 2 18 Field 3

Markup

<div ng-controller="SummaryModalButtonController as summaryModalBtnCtrl">
  <button type="button" class="btn btn-primary" ng-click="summaryModalBtnCtrl.open()">Open standard modal</button>
  <button type="button" class="btn btn-primary" ng-click="summaryModalBtnCtrl.open(true)">Open full page modal</button>
  
      <bb-summary-actionbar>
        <bb-summary-actionbar-actions>
            <bb-summary-actionbar-primary>Primary action</bb-summary-actionbar-primary>
            <bb-summary-actionbar-secondary-actions>
                <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action</bb-summary-actionbar-secondary>
                <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action 2</bb-summary-actionbar-secondary>
            </bb-summary-actionbar-secondary-actions>
            <bb-summary-actionbar-cancel>Cancel</bb-summary-actionbar-cancel>
        </bb-summary-actionbar-actions>
        <bb-summary-actionbar-summary>
            <div>
            <bb-key-info>
            <bb-key-info-value>$123.00</bb-key-info-value>
            <bb-key-info-label>Field 1</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$456.00</bb-key-info-value>
            <bb-key-info-label>Field 2</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>18</bb-key-info-value>
            <bb-key-info-label>Field 3</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$123.00</bb-key-info-value>
            <bb-key-info-label>Field 1</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$456.00</bb-key-info-value>
            <bb-key-info-label>Field 2</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>18</bb-key-info-value>
            <bb-key-info-label>Field 3</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$123.00</bb-key-info-value>
            <bb-key-info-label>Field 1</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>$456.00</bb-key-info-value>
            <bb-key-info-label>Field 2</bb-key-info-label>
            </bb-key-info>
            <bb-key-info>
            <bb-key-info-value>18</bb-key-info-value>
            <bb-key-info-label>Field 3</bb-key-info-label>
            </bb-key-info>
        </div>
        </bb-summary-actionbar-summary>
    </bb-summary-actionbar>
      
</div>

<script type="text/ng-template" id="demo/summaryactionbar/modalform.html">
    <bb-modal>
        <div class="modal-form">
            <bb-modal-header bb-modal-help-key="'bb-security-users.html'">Modal header</bb-modal-header>
            <div bb-modal-body>
                <form>
                    <div class="form-group">
                        <label for="modal-test-input" class="control-label">Something</label>
                        <input id="modal-test-input" type="text" class="form-control" autofocus />
                    </div>
                </form>
            </div>
            <bb-modal-footer>
                <bb-summary-actionbar>
                    <bb-summary-actionbar-actions>
                        <bb-summary-actionbar-primary>Primary action</bb-summary-actionbar-primary>
                        <bb-summary-actionbar-secondary-actions>
                            <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action</bb-summary-actionbar-secondary>
                            <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action 2</bb-summary-actionbar-secondary>
                            <bb-summary-actionbar-secondary ng-click="summaryCtrl.alertEmit('Secondary 1')">Secondary action 3</bb-summary-actionbar-secondary>
                        </bb-summary-actionbar-secondary-actions>
                        <bb-summary-actionbar-cancel>Cancel</bb-summary-actionbar-cancel>
                    </bb-summary-actionbar-actions>
                    <bb-summary-actionbar-summary>
                        <div>
                        <bb-key-info>
                        <bb-key-info-value>$123.00</bb-key-info-value>
                        <bb-key-info-label>Field 1</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$456.00</bb-key-info-value>
                        <bb-key-info-label>Field 2</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>18</bb-key-info-value>
                        <bb-key-info-label>Field 3</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$123.00</bb-key-info-value>
                        <bb-key-info-label>Field 1</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$456.00</bb-key-info-value>
                        <bb-key-info-label>Field 2</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>18</bb-key-info-value>
                        <bb-key-info-label>Field 3</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$123.00</bb-key-info-value>
                        <bb-key-info-label>Field 1</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>$456.00</bb-key-info-value>
                        <bb-key-info-label>Field 2</bb-key-info-label>
                        </bb-key-info>
                        <bb-key-info>
                        <bb-key-info-value>18</bb-key-info-value>
                        <bb-key-info-label>Field 3</bb-key-info-label>
                        </bb-key-info>
                    </div>
                    </bb-summary-actionbar-summary>
                </bb-summary-actionbar>
            </bb-modal-footer>
        </div>
    </bb-modal>
</script>

JavaScript

/* global angular */

(function () {
    'use strict';

    function SummaryActionbarTestController() {
        var ctrl = this;

        function alertEmit(message) {
            alert(message);
        }

        ctrl.alertEmit = alertEmit;
    }

    function SummaryModalButtonController(bbModal) {
        var ctrl = this;
        
        ctrl.open = function (fullPage) {
            bbModal.open(
                {
                    controller: 'SummaryActionbarTestController as summaryCtrl',
                    templateUrl: 'demo/summaryactionbar/modalform.html'
                },
                {
                    fullPage: fullPage
                }
            );
        };
    }

    SummaryModalButtonController.$inject = ['bbModal'];

    angular.module('stache')
        .controller('SummaryModalButtonController', SummaryModalButtonController)
        .controller('SummaryActionbarTestController', SummaryActionbarTestController);

})();