javascript - Angular Js ui.bootstrap tabs customization -
i using angular js ui.bootstrap in project , want add tabs using ui bootstrap. using ui.bootstrap directive tabs. there no ul li content inside angular ui bootstrap tag.
<uib-tabset active="active"> <uib-tab index="0" heading="static title 1">static content 1</uib-tab> <uib-tab index="0" heading="static title 2">static content 2</uib-tab> <uib-tab index="0" heading="static title 3">static content 3</uib-tab> </uib-tabset>
i want add span tag inside tag in tabs. output want.
<li ng-class="{active: active, disabled: disabled}" index="0" heading="static title 1" class="ng-isolate-scope active"> <a href="" ng-click="select()" uib-tab-heading-transclude="" class="ng-binding"> <span class="badge">5</span>static title 1 </a> </li>
if knows how this, please me find out solution.
thanks in advance.
you use uib-tab-heading
directive inside uib-tab
have own custom html inside heading. thereafter can specified html content inside uib-tab-heading
element transcluded inside tab header.
markup
<uib-tabset active="active"> <uib-tab index="0" heading="static title 1"> <uib-tab-heading> <span class="badge">5</span>static title 1 </uib-tab-heading> </uib-tab> <uib-tab index="0" heading="static title 2"> <uib-tab-heading><b> <span class="badge">5</span>static title 3 </uib-tab> </uib-tab> <uib-tab index="0" heading="static title 3"> <uib-tab-heading><b> memory utilization </b> <span class="badge">5</span>static title 3 </uib-tab-heading> </uib-tab> </uib-tabset>
Comments
Post a Comment