Components

Accordions
Dropdown Menus
Modal Dialogs
Expandable Panel
Slide Panel
Tabs
Tooltips

Accordions

Accordions use the UI Bootstrap accordion directive.

This content is straight in the template.

Content.

      <accordion close-others="true">
  <accordion-group heading="Accordion Header" ng-class="{'expanded':isOpen}" is-open="isOpen">
    This content is straight in the template.
  </accordion-group>
  <accordion-group heading="Accordion Header" ng-class="{'expanded':isOpenB}" is-open="isOpenB">
    <p>Content.</p>
  </accordion-group>
</accordion>
    

Dropdown Menus

There are 2 types of dropdown menus. The Button Dropdown and the Circle Button Dropdown. The Button Dropdown uses the UI Bootstrap directive Dropdown.

On mobile, the circle button dropdown changes to an action sheet style. Add the .as-action-sheet modifier to the parent element with the .dropdown class.

Rules of Development

All dropdown buttons must default to the .btn-default class for styling.
All dropdown menu items must be separated with a divider.
On mobile, action sheet must always have a Cancel menu item.

Button Dropdown Menu

    
    Action Item
Action Item
Action Item


      <div class="dropdown" dropdown is-open="isOpen">
    <button type="button" role="button" class="btn btn-default" dropdown-toggle>Actions
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="dropdown-menu-id" role="menu">
        <li role="presentation"><a href="" role="menuitem">Action Item</a></li>
        <li role="presentation"><a href="" role="menuitem">Action Item</a></li>
        <li role="presentation"><a href="" role="menuitem">Action Item</a></li>
    </ul>
</div>
    

Circle Button Dropdown Menu

View this on mobile to see the .as-action-sheet modifier in action.

            
            Action Item
Action Item
Action Item
Cancel

        

      <div class="row">
    <div class="col-md-2">
        <div class="dropdown circle-button-dropdown-wrapper as-action-sheet" id="circle-dropdown-menu-id" dropdown is-open="isOpen">
            <button class="with-circle-toggle no-btn" role="button" dropdown-toggle>
                <span class="circle-dropdown-label-wrapper">
                    <span class="circle-dropdown-label">More Actions</span>
                    <span class="btn btn-sm dropdown-toggle-circle">
                        <span class="caret"></span>
                    </span>
                </span>
            </button>
            <ul class="dropdown-menu" id="userMenu">
                <li role="presentation"><a href="" role="menuitem">Action Item</a></li>
                <li role="presentation"><a href="" role="menuitem">Action Item</a></li>
                <li role="presentation"><a href="" role="menuitem">Action Item</a></li>
                <li role="presentation"><a href="" role="menuitem">Cancel</a></li>
            </ul>
        </div>
    </div>
</div>
    

Expandable Panel

The Expandable Panel component is a simple alternative to an accordion. This allows for greater control over what content goes inside the expandable panel, in the panel header, and even allows for additional controls to be placed on the panel heading bar, such as a More or Actions dropdown which would be difficult to accomplish with Bootstrap's standard Accordion.

Rules of Development

Right edge of expandable panel must be flush with right edge of window (Not shown in this example)
Panel background color changes to grey on expanded state
The "More" dropdown on the right side of panel should only contain actions that are appliable to the panel itself

Panel Heading

Other info

Panel subheading or descriptor text

Edit Close

Works great with a form!

      <div class="exp-panel-wrapper">
<article class="expandable-panel" ng-class="{'is-expanded': toggleExpandedPanel}">
    <header class="exp-panel-header">
        <div class="exp-panel-description">
            <h2 class="exp-panel-heading">Panel Heading</h2>
      <span class="exp-panel-detail-info">Other info</span>
            <p class="description">Panel subheading or descriptor text</p>
        </div>
        <span class="exp-panel-actions">
            <a href="" ng-click="toggleExpandedPanel = !toggleExpandedPanel">
                <span ng-if="!toggleExpandedPanel">Edit</span>
                <span ng-if="toggleExpandedPanel">Close</span>
            </a>
        </span>
    <div class="exp-panel-more-options dropdown" dropdown>
            <button type="button" role="button" class="no-btn" dropdown-toggle>
                More
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="">Duplicate</a>
                </li>
                <li>
                    <a href="">Remove</a>
                </li>
            </ul>
        </div>
    </header>
    <section class="exp-panel-content" collapse="!toggleExpandedPanel">
    <p>Works great with a form!</p>
    <div class="row">
      <div class="col-md-6">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-sm-3" for="exp_panel_name">Name</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="exp_panel_name" placeholder="Required" />
            </div>
          </div><!-- /.form-group -->
          <div class="form-group">
            <label class="control-label col-sm-3" for="exp_panel_name">Email</label>
            <div class="col-sm-9">
              <input type="email" class="form-control" id="exp_panel_name" placeholder="Required" />
            </div>
          </div>
          <div class="form-group">
            <div class="multi-button-bar">
              <button type="button" role="button" class="btn btn-primary">Ok</button>
              <button type="button" role="button" class="btn btn-default">Cancel</button>
            </div>
          </div><!-- /.form-group -->
        </form>
      </div>
    </div><!-- /.row -->
    </section>
</article>
</div>
    

Modal Dialogs

Modals use the UI Bootstrap modal directive.

      <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <button type="button" class="close">
    <span class="sr-only">Close</span>
  </button>
  <h2 class="modal-title">Remove Something Modal Title</h2>
</div>
<div class="modal-body">
  <p>Are you sure you want to remove this?</p>
</div>
<div class="modal-footer">
  <div class="multi-button-bar">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
  </div>
</div>
</div>
</div>
    

Slide Panel

A Slide Panel is a full-height panel dialog that slides into view from the right of the viewport upon trigger. Slide Panels are used to provide more information or secondary actions from the main content. It uses the existing Bootstrap modal dialog styling and functionality and converts the modal box to be hidden and slide in from the right when triggered. When creating the modalInstance in the controller, set windowClass to be 'modal-as-slide-panel' This class will activate the slide panel properties.

Rules of Development

Slide Panel will be the topmost layer, no other element should sit above it.
Slide Panel must always slide in from the right side of the viewport.
The interior content must follow all accessibility guidelines and requirements.
Slide Panel should always have a header, or title.
The interior layout of the Slide Panel must follow the standard layout of the default Bootstrap modal dialog.
The trigger for the Slide Panel must always be a button with role and type defined. If you have to use an a link element, please use the role="button" attribute.

Semantic Note The Slide Panel should always have at least 2 ways of closing the panel: a close icon in the top-right corner of the panel (default), and a Cancel button at the bottom to close the panel without any action taken. You can also click outside the panel to close it.

  
      <div ng-controller="SGSlidePanelCtrl">
  <button role="button" type="button" class="btn btn-default" ng-click="openSlidePanel()">Trigger Slide Panel</button>
</div>

    // Slide Panel example controller.
app.controller('SGSlidePanelCtrl', ['$scope', '$modal', function(scope, $modal) {
  scope.data = ['List Item 1', 'List Item 2', 'List Item 3'];
  scope.panelTitle = 'Example Slide Panel';

  scope.openSlidePanel = function() {
    var modalInstanceSG = $modal.open({
      templateUrl: 'templates/sg-slide-panel-template.html',
      controller: 'ModalInstanceCtrl',
      windowClass: 'modal-as-slide-panel',
      resolve: {
        panelData: function() {
          return {
            panelTitle: scope.panelTitle,
            data: scope.data
          }
        }
      }
    });
    modalInstanceSG.result.then(function() {
      console.log('Slide panel opened.');
    }, function () { });
  };
}]);

// Slide Panel instance controller.
app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'panelData', function(scope, $modalInstance, panelData) {
  scope.panelData = panelData;
  scope.data = panelData.data;
  scope.panelTitle = panelData.panelTitle;

  scope.close = function() {
    $modalInstance.dismiss('cancel');
  };
}]);
  

Tabs

Tabs use the UI Bootstrap tabs directive.

In Progress Tasks tab content

Completed tab content

Inactive/Cancelled tab content

      <div class="page-tabs tabs-3-across">
<tabset>
  <tab heading="In Progress">
    <p>In Progress Tasks tab content</p>
  </tab>
  <tab heading="Completed">
    <p>Completed tab content</p>
  </tab>
  <tab heading="Inactive/Cancelled">
    <p>Inactive/Cancelled tab content</p>
  </tab>
</tabset>
</div>
    

Tooltips

Tooltips use the UI Bootstrap tooltip directive.

Hover over me for more info.

      <p class="sg-reset-width" tooltip-placement="top" tooltip-append-to-body="true" tooltip-trigger="mouseenter" tooltip-html-unsafe="More Info!"><b>Hover over me for more info.</b></p>
    

Groups

Multi-Button Bar

Multi-Button Bar

The .multi-button-bar class groups 2 or more buttons and floats them to the right. Modal dialogs, forms, and anything that may require 2 or more actions must use the .multi-button-bar.

          Some content.
        

            
            
          

      <div class="row">
    <div class="col-md-3">
      <div class="panel panel-default">
        <div class="panel-body">
          Some content.
        </div>
        <div class="panel-footer">
          <div class="multi-button-bar">
            <button role="button" type="button" class="btn btn-primary">Save</button>
            <button role="button" type="button" class="btn btn-default">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
    