bootstrap-treeview icon indicating copy to clipboard operation
bootstrap-treeview copied to clipboard

Set different backgrounds colors to badges (tags).

Open Raf-sns opened this issue 7 years ago • 0 comments

Set different backgrounds colors to badges (tags). A way to define simply the background color of badges.

1/ Add tag-background object in your data set (Define a logic who give diffrents colors to the context, when you contruct your object)

var dataObject = [{
    'text' : 'My text',
    'tag-background' : '#3498db',  // a background-color tag
    'nodes' : [{
     
              'text' : 'Other text',
              'tag-background' : '#2ecc71'   // a different background-color tag
    }]
}]

2/ Enable tags on Bootstraps-treeview :

$('#tree').treeview({
    data: { dataObject },
    showTags: true
})

3/ Change in bootstrap-treeview.js

// Add tags as badges    (line 599)
if (_this.options.showTags && node.tags) {
	$.each(node.tags, function addTag(id, tag) {
		treeItem
			.append($(_this.template.badge) // line 603
                            .css({'background' : node.tag-background })  // add this
				.append( tag ) // line 604
			);
	});
}

Just add this for change badge background color for what you want, Friendly, Raf

Raf-sns avatar Mar 15 '18 02:03 Raf-sns