Action bar

The action bar creates a SKY UX-themed container for buttons. It includes an option to collapse groups of buttons into dropdowns when the screen is in extra-small mode.

To apply action bar styling to more complicated scenarios, you can place content in a div with the bb-action-bar class. For example, this technique allows you to hide and show buttons at breakpoints other than xs and to collapse dropdowns into submenus. Bootstrap convenience classes to show or hide content include hidden-xs, hidden-sm, hidden-md, and hidden-lg. For information about these classes, see the Bootstrap documentation.

Action bar settings

  • bb-action-bar — Wraps the content in the action bar to create a SKY UX-themed container for buttons.
    • bb-action-bar-item — Wraps the content in an action button. Any ng-click applied to this directive is applied to the action button.
      • bb-action-bar-item-label — Assigns a label to the action bar item for screen readers (only necessary if the action bar item does not contain visible text).
    • bb-action-bar-item-group — Wraps bb-action-bar-item directives to collapse the buttons into a dropdown in extra-small mode.
      • bb-action-bar-item-group-title(Optional.) Edits the default Actions label for the dropdown.

Demo

{{item.actionText}}

Last action clicked: {{actionCtrl.lastAction}}

Action bar classes for more complicated content

Last action clicked: {{actionCtrl.lastAction}}

Markup

<div ng-controller="ActionButtonBarTestController as actionCtrl">
    <script type="text/ng-template" id="actionbarList.html">
      <li>
        <a href ng-click="actionCtrl.subAction1()">Sub-action 1</a>
      </li>
      <li>
        <a href ng-click="actionCtrl.subAction2()">Sub-action 2</a>
      </li>
    </script>
  <bb-action-bar>
    <div class="row">
        <div class="col-xs-8 col-md-10">
            <bb-action-bar-item-group bb-action-bar-item-group-title="actionCtrl.collapsedText">
                <bb-action-bar-item ng-repeat="item in actionCtrl.items" ng-if="item.visible" ng-click="item.action()">
                    {{item.actionText}}
                </bb-action-bar-item>
            </bb-action-bar-item-group>
        </div>
        <div class="col-xs-4 col-md-2">
            <div class="pull-right">
                <bb-action-bar-item ng-click="actionCtrl.rightAction1()" bb-action-bar-item-label="Open tiles">
                    <span class="fa fa-angle-double-up"></span>
                </bb-action-bar-item>
                <bb-action-bar-item ng-click="actionCtrl.rightAction2()" bb-action-bar-item-label="Close tiles">
                    <span class="fa fa-angle-double-down"></span>
                </bb-action-bar-item>
            </div>
        </div>
    </div>
  </bb-action-bar>
  <p></p>
  <p>
        Last action clicked: <strong>{{actionCtrl.lastAction}}</strong>
  </p>
  <p>
        <button type="button" class="btn btn-primary" ng-click="actionCtrl.items[1].visible = !actionCtrl.items[1].visible">Toggle action 2</button>
  </p>
  <p>
        <button type="button" class="btn btn-primary" ng-click="actionCtrl.addItem()">Add action</button>
  </p>
</div>

<div ng-controller="ActionButtonBarTestController as actionCtrl">

  <h3 style="margin-top: 20px; margin-bottom: 20px;">Action bar classes for more complicated content</h3>
  
  <div class="bb-action-bar">
    <div class="row">
        <div class="col-xs-8 col-md-10">
            <button ng-repeat="item in actionCtrl.items" class="btn bb-btn-secondary bb-action-bar-item-button hidden-xs" ng-if="item.visible" ng-click="item.action()">
                {{item.actionText}}
            </button>

            <div uib-dropdown class="hidden-xs" style="display: inline-block;">
                <button class="btn bb-btn-secondary"  uib-dropdown-toggle type="button" href="javascript:void(0)">
                    {{actionCtrl.dropdownText}} <span class="caret"/>
                </button>

                <ul uib-dropdown-menu ng-include src="'actionbarList.html'"></ul>
            </div>

            <div uib-dropdown class="visible-xs">
                <button aria-controls="bb-actionbar-custom-id" class="btn bb-btn-secondary"  uib-dropdown-toggle type="button" href="javascript:void(0)">
                    {{actionCtrl.collapsedText}} <span class="caret"/>
                </button>

                <ul id="bb-actionbar-custom-id" uib-dropdown-menu>
                    <li ng-repeat="item in actionCtrl.items" ng-show="item.visible">
                        <a href ng-click="item.action()">{{item.actionText}}</a>
                    </li>
                    <li>
                        <bb-submenu bb-submenu-heading="actionCtrl.dropdownText">
                            <ul ng-include src="'actionbarList.html'"></ul>
                        </bb-submenu>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-xs-4 col-md-2">
            <div class="pull-right">
                <button class="btn bb-btn-secondary bb-action-bar-item-button" type="button" ng-click="actionCtrl.rightAction1()" aria-label="Open tiles">
                    <span class="fa fa-angle-double-up"></span>
                </button>
                <button class="btn bb-btn-secondary bb-action-bar-item-button" type="button" ng-click="actionCtrl.rightAction2()" aria-label="Close tiles">
                    <span class="fa fa-angle-double-down"></span>
                </button>
            </div>
        </div>
    </div>
</div>
  <p></p>
  <p>
        Last action clicked: <strong>{{actionCtrl.lastAction}}</strong>
  </p>
  <p>
        <button type="button" class="btn btn-primary" ng-click="actionCtrl.items[1].visible = !actionCtrl.items[1].visible">Toggle action 2</button>
  </p>
  <p>
        <button type="button" class="btn btn-primary" ng-click="actionCtrl.addItem()">Add action</button>
  </p>

</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function ActionButtonBarTestController() {
        var self = this;

        self.items = [
            {
                action: function () {
                    self.lastAction = 'Action 1';
                },
                actionText: 'Action 1',
                visible: true
            },
            {
                action: function () {
                    self.lastAction = 'Action 2';
                },
                actionText: 'Action 2',
                visible: false
            },
            {
                action: function () {
                    self.lastAction = 'Action 3';
                },
                actionText: 'Action 3',
                visible: true
            }
        ];

        self.addItem = function () {
            self.items.push({
                action: function () {
                    self.lastAction = 'New Action';
                },
                actionText: 'New Action',
                visible: true
            });
        };

        self.rightAction1 = function () {
            self.lastAction = 'Right Action 1';
        };

        self.rightAction2 = function () {
            self.lastAction = 'Right Action 2';
        };

        self.subAction1 = function () {
            self.lastAction = 'Sub-action 1';
        };

        self.subAction2 = function () {
            self.lastAction = 'Sub-action 2';
        };

        self.dropdownText = 'More actions';

        self.collapsedText = 'My actions';
    }

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