PrimeFaces中如何制作彩色标签页或在标签后添加outputText？

别着急，我来帮你搞定这个TabView里添加带双色文本标签的问题！

首先得明确你用的是哪种TabView组件（比如PrimeFaces、JSF标准组件这类），不过我先拿最常用的PrimeFaces TabView举例，给你一套可行方案，其他框架的思路基本一致~

核心思路 #

要实现标签文本部分黑、部分红，不能直接用普通的title属性，得靠自定义标签内容：把文本拆成两个<span>分别设置颜色，再嵌入到Tab的标题区域里。

具体代码示例 #

1. PrimeFaces TabView 实现方式 #

<p:tabView>
    <!-- 你已有的两个标签页 -->
    <p:tab title="标签页1">
        <h:outputText value="这是标签页1的内容"/>
    </p:tab>
    <p:tab title="标签页2">
        <h:outputText value="这是标签页2的内容"/>
    </p:tab>

    <!-- 新添加的带双色文本的标签页 -->
    <p:tab>
        <!-- 用facet自定义标签标题，拆分文本设置颜色 -->
        <f:facet name="title">
            <h:outputText escape="false">
                <span style="color: black;">黑色文本</span>
                <span style="color: red;">红色文本</span>
            </h:outputText>
        </f:facet>
        <!-- 这里放新标签页的内容 -->
        <h:outputText value="新标签页的内容"/>
    </p:tab>
</p:tabView>

这里的关键是用<f:facet name="title">替换默认的title属性，然后在里面用<span>分别定义不同颜色的文本。一定要记得给h:outputText加上escape="false"，不然HTML标签会被当成纯文本显示，起不到变色效果。

2. 标准JSF TabView 实现方式 #

如果你用的是标准JSF的TabView，思路完全一样，只是把facet的名字换成header：

<h:tabView>
    <h:tab label="标签页1">
        <h:outputText value="标签页1内容"/>
    </h:tab>
    <h:tab label="标签页2">
        <h:outputText value="标签页2内容"/>
    </h:tab>

    <h:tab>
        <f:facet name="header">
            <h:outputText escape="false">
                <span style="color: #000;">黑色部分</span>
                <span style="color: #f00;">红色部分</span>
            </h:outputText>
        </f:facet>
        <h:outputText value="新标签页内容"/>
    </h:tab>
</h:tabView>

常见问题排查 #

如果你之前尝试没成功，大概率是这几个原因：

• 直接在title/label属性里写HTML：这种方式会被组件转义成纯文本，根本不会生效，必须用facet自定义标题
• 忘记加escape="false"：导致<span>标签被当成普通文字显示，起不到样式作用
• 样式被覆盖：如果你的TabView有自定义CSS，可能会覆盖span的颜色。这时候可以给span加专属class，用更高优先级的样式，比如：

<span class="tab-black">黑色文本</span>
<span class="tab-red">红色文本</span>

然后在CSS里写：

.tab-black { color: black !important; }
.tab-red { color: red !important; }

你可以根据自己用的框架调整代码，应该就能顺利实现需求啦！

内容的提问来源于stack exchange，提问作者andron