图标标签栏文本颜色更改

Question

如何在 ui5 应用程序中更改图标标签栏文本颜色？我正在尝试更改图标选项卡栏的文本颜色。我有两个图标，根据条件我想更改第二个图标选项卡栏文本颜色。

我尝试了以下两种方法，但都没有成功。下面是我的 css,controller 和 xml:

的代码

XML

<IconTabSeparator icon="sap-icon://open-command-field"/>
    <IconTabFilter id="id"  icon="sap-icon://account"  design="Horizontal" 
        text="sales" key="1" enabled="false"/>

    <IconTabFilter id="id2" icon="sap-icon://action" text="purchase" key="1"
        enabled="false"/>

CSS代码：

.TextColor{
    color: red !important;
}

控制器：

that.getView().byId("id").addStyleClass("TextColor");

//getting error like below
that.getView(...).byId(...).addStyleClass is not a function    

that.getView().byId("id").getText().fontcolor("#ff3333").//no effect

Answer 1

IconTabFilter 使用 iconColor 属性来改变颜色。

它可以采用有限数量的颜色选项 - 请参阅此处：options

我更喜欢使用模型绑定设置颜色：

控制器（根据需要调整条件）：

if (condition == bad) that.getView().getModel("viewModel").setProperty("/salesIconColour", "Critical");

查看：

<IconTabFilter
        key="1"
        icon="sap-icon://account"
        iconColor="{viewModel>/salesIconColour}"
        text="sales"/>

您还可以直接在视图中使用内联绑定表达式（如果您愿意）。通过以上内容，您可以影响任何特定图标（销售或购买）的颜色。

Answer 2

实现这一目标的最佳方法可能是使用自定义数据聚合。在您的 IconTabFilter 中：

<IconTabFilter id="id"  icon="sap-icon://account"  design="Horizontal" 
    text="sales" key="1" enabled="false"> 
    <customData>
        <core:CustomData key="myTextColor" value="red" writeToDom="true"/>
    </customData>
</IconTabFilter>

在你的 css 中：

*[data-myTextColor='red'] .sapMITBText{
    color: red !important;
}

为了避免不需要的样式，我通常也会在我的 <App/> 标签中添加一个 class，例如

<App id="app" busy="{appView>/busy}" busyIndicatorDelay="{appView>/delay}" class="myApp">

因此 css 选择器变为：

.myApp *[data-myTextColor='red'] .sapMITBText{
    color: red !important;
}

Answer 3

也许你可以在 onAfterRendering 中做到这一点。我认为这不是最好的方法。

let iconTabFilter = document.getElementById(self.getView().byId("id").sId + "-text"); iconTabFilter.style.cssText = "color: red !important";

图标标签栏文本颜色更改

Icon Tab bar text color change

sapui5

sap-fiori