This site describes our support for the AngularJS (1.x) framework. Visit developer.blackbaud.com/skyux for information on our latest version.

Create a tabbed page

Now that we know how to create a record page, lets look at how to create the other common page type in SKY UX: a tabbed page. While record pages display data for individual records, tabbed pages usually serve as overviews for multiple records. For example, tabbed pages can display lists of constituents or gifts.

Tabs component

SKY UX uses the UI Bootstrap Tabs module to display tabs. It adds SKY UX-specific functionality with its tabset module.

In this example, we have two tabs. Each tab displays a list of records, and to display the number of records beside the tab headers, we use the .bb-tab-header-count CSS class. And to display tab content from edge to edge and give the tabs themselves a margin, we add the .bb-page-tabs CSS class.

This example displays data in grids. For information about how to use grids, see the grid directive.

Overview

Constituents {{tabbedPage.constituentCount}} Gifts {{tabbedPage.giftCount}}
<div class="container-fluid">
  <h1>Overview</h1>
</div>
<uib-tabset class="bb-page-tabs">
  <uib-tab>
    <uib-tab-heading>
      Constituents <span class="bb-tab-header-count">{{tabbedPage.constituentCount}}</span>
    </uib-tab-heading>
    <bb-grid bb-grid-options="tabbedPage.constituentGridOptions"></bb-grid>
  </uib-tab>
  <uib-tab>
    <uib-tab-heading>
      Gifts <span class="bb-tab-header-count">{{tabbedPage.giftCount}}</span>
    </uib-tab-heading>
    <bb-grid bb-grid-options="tabbedPage.giftGridOptions"></bb-grid>
  </uib-tab>
</uib-tabset>

Now that we've covered the two basic page types, we can proceed to the Components section for more information about the components that we can include on each page type.


Next step: Build out your application »