Panel Heading
Other infoPanel subheading or descriptor text
Works great with a form!
Accordions use the UI Bootstrap accordion directive.
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>
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
.btn-default
class for styling.<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>
View this on mobile to see the .as-action-sheet
modifier in action.
<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>
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
Panel subheading or descriptor text
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>
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>
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
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 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 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>
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
.
<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>