[英]Angular Js ui.bootstrap tabs customization
I am using angular js ui.bootstrap in my project and I want to add tabs using ui bootstrap. 我在我的项目中使用angular js ui.bootstrap,我想使用ui bootstrap添加标签。 I am using ui.bootstrap directive for tabs. 我正在使用ui.bootstrap指令作为标签。 But there is no ul li content inside that angular ui bootstrap tag. 但是这个有角度的ui bootstrap标签里面没有ul li内容。
<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 to add a span tag inside the a tag in tabs. 我想在标签中的标签内添加span标签。 This is the output I 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 anyone knows how to do this, please help me find out the solution. 如果有人知道如何做到这一点,请帮我找出解决方案。
Thanks in advance. 提前致谢。
You could use uib-tab-heading
directive inside uib-tab
to have your own custom html inside heading. 你可以使用uib-tab-heading
指令内uib-tab
有内部标题自己的自定义HTML。 Thereafter you can specified your html content inside uib-tab-heading
element then that would be transcluded inside tab header. 之后,您可以在uib-tab-heading
元素中指定html内容,然后将其转换为选项卡标题内的内容。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.