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