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);
}());