Angularjs 引导标签集标签标题 [英] Angularjs bootstrap tabset tab heading

问题描述

我想知道是否可以在 angularjs bootstrap tabset tab 标题中写入 html.我正在尝试在标题中添加一个 svg.我在 plunker 中创建了一个快速片段来尝试演示我遇到的问题.

I am wondering whether it is possible to write html inside an angularjs bootstrap tabset tab heading. I am trying to add a svg inside the title. I have created a quick snippet in plunker to try and demonstrate the issue I am having.

<tabset>
  <tab heading="<span>hello</span><em>1</em>">One</tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU

有什么想法吗?

谢谢

推荐答案

Angular Bootstrap v0.14+

Angular Bootstrap v0.14 引入大多数以前提供的控件的新前缀.下面的原始答案仍然适用，但您必须使用新标签名称 uib-tabset、uib-tab 和 uib-tab-heading.

Angular Bootstrap v0.14+

Angular Bootstrap v0.14 introduced new prefixes for most previously provided controls. The original answer below still applies, but you must use the new tag names uib-tabset, uib-tab, and uib-tab-heading.

<uib-tabset>
  <uib-tab>
    <uib-tab-heading>
      <span>hello</span><em>1</em>
    </uib-tab-heading>
    One
  </uib-tab>
  <uib-tab heading="Two">Two</uib-tab>
  <uib-tab heading="Three">Three</uib-tab>
</uib-tabset>

Angular Bootstrap <v0.14

如果您想在标题中使用 HTML，您应该在 tab 元素中使用 tab-heading 元素(如 文档):

Angular Bootstrap < v0.14

You should be using the tab-heading element within the tab element if you want HTML within the heading (as shown in the example in the docs):

<tabset>
  <tab>
    <tab-heading>
      <span>hello</span><em>1</em>
    </tab-heading>
    One
  </tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

更新了 plunker 此处.

Updated plunker here.

这篇关于Angularjs 引导标签集标签标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！