Изменение цвета текста панели вкладок - PullRequest
Новая
       10

Изменение цвета текста панели вкладок

0 голосов
/ 09 января 2020

Как изменить цвет текста панели вкладок значков в приложении ui5? Я пытаюсь изменить цвет текста панели вкладок значка. У меня есть два значка, и в зависимости от условия я хочу изменить цвет текста панели вкладок 2-го значка.

Я попробовал два способа ниже, но не смог добиться успеха. Ниже мой код css, контроллер и 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

Ответы [ 3 ]

0 голосов
/ 09 января 2020

Лучший способ добиться этого, вероятно, заключается в использовании пользовательского агрегирования данных. В вашем 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/>, такой как 

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

Таким образом, селектор css становится: 

.myApp *[data-myTextColor='red'] .sapMITBText{
    color: red !important;
}
0 голосов
/ 09 января 2020

Может быть, вы можете это в onAfterRendering. Я думаю, что это не лучший способ.

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

0 голосов
/ 09 января 2020

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"/>

Вы также можете напрямую использовать встроенные выражения привязки в представлении (если вы sh). С помощью вышеперечисленного вы можете повлиять на цвет любого конкретного значка (продажи или покупки).

...