Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.

Definition list

The definition list component displays a list of label-value pairs.

Definition list settings

  • bb-definition-list — Presents a list of label-value pairs.
    • bb-definition-list-label-width(Optional.) Specifies the width of the label portion of the definition list. (Default: 90px)
    • bb-definition-list-default-value(Optional.) Specifies the text to display when no value is available in a label-value pair. (Default: None found)
    • bb-definition-list-heading(Optional.) Specifies a heading for the definition list.
    • bb-definition-list-content — Contains the content to display in label-value pairs.
      • bb-definition-list-label — Specifies a label to display.
      • bb-definition-list-value(Optional.) Specifies a value to display.

Demo

Personal information {{item.label}} {{item.value}}
System information {{item.label}} {{item.value}}

Markup

<div ng-controller="DefinitionListTestController as definitionListCtrl">
  <div class="row">
      <div class="col-sm-6">
        <bb-definition-list>
            <bb-definition-list-heading>
                Personal information
            </bb-definition-list-heading>
            <bb-definition-list-content ng-repeat="item in definitionListCtrl.personalInfo">
                <bb-definition-list-label>
                    {{item.label}}
                </bb-definition-list-label>
                <bb-definition-list-value>
                    {{item.value}}
                </bb-definition-list-value>
            </bb-definition-list-content>
          </bb-definition-list>
      </div>
      <div class="col-sm-6">
        <bb-definition-list bb-definition-list-label-width="150px" bb-definition-list-default-value="'No information found'">
            <bb-definition-list-heading>
                System information
            </bb-definition-list-heading>
            <bb-definition-list-content ng-repeat="item in definitionListCtrl.systemInfo">
                <bb-definition-list-label>
                    {{item.label}}
                </bb-definition-list-label>
                <bb-definition-list-value>
                    {{item.value}}
                </bb-definition-list-value>
            </bb-definition-list-content>
        </bb-definition-list>    
      </div>
  </div>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function DefinitionListController() {
        var personalInfo = [
            {
                label: 'Job title',
                value: 'Engineer'
            },
            {
                label: 'Hobby',
                value: 'Volleyball'
            },
            {
                label: 'Experience',
                value: '3 years'
            }
        ],
        systemInfo = [
            {
                label: 'Username',
                value: 'user1'
            },
            {
                label: 'Role',
                value: 'Admin'
            },
            {
                label: 'Last log-in time'
            }
        ],
        self = this;

        self.personalInfo = personalInfo;
        self.systemInfo = systemInfo;
    }

    angular.module('stache')
        .controller('DefinitionListTestController', DefinitionListController);
}());