使用现有样式类

Question

我想处理Text控件（sap.m）中值的颜色。如果值为"TRUE"，则颜色为绿色。否则，如果值为"FALSE"，则为红色。

<Text
  class="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'greenTextColor' : redTextColor'}"
  text="{HintTable>IS_ENABLED}"
/>

但它似乎没有起作用。我的意思是，class无法收到"greenTextColor"或"redTextColor"。

我做错了吗？

Answer 1

UI doesn't support绑定class在XML视图中直接，因为它不是ManagedObject的有效属性。不过，通过添加自定义数据：

可以解决此问题

向您的控件添加包含属性writeToDom的CustomData。在那里使用你的表达式绑定：

<Text class="myText" text="{HintTable>IS_ENABLED}"> <customData> <core:CustomData key="green" value="foo" writeToDom="{= ${HintTable>IS_ENABLED} === 'TRUE'}"/> </customData> </Text>

根据表达式绑定的结果，data-green将添加到控件的DOM元素中。然后，浏览器可以操作与attribute selector对应的颜色。

因此，您的CSS应相应地包含选择器：.… .sapMText.myText[data-green] {…}

当然，您也可以将所需的任何内容绑定到value属性，以便对更精细的CSS选择器做出反应。要了解有关如何利用DOM中的自定义数据的更多信息，请查看文档中的Writing Data to the HTML DOM as DATA-* Attribute部分。

注意

SAP recommends以避免使用自定义CSS类指定颜色。

Fiori应用不应覆盖样式。 [...]不要在自定义CSS中指定颜色，而是使用标准的主题相关类。

在样式sap.m.Text方面有其他选择：

Text with semantic colors：sap.m。ObjectStatus ,. ObjectNumber

自定义格式的文字：sap.m。FormattedText（有一个名为htmlText的属性，甚至支持class代码。）

通常，添加自定义CSS样式的重要性应始终受到质疑并与用户进行双重检查，不仅要考虑到Fiori应用程序之间的UI一致性，还要降低维护成本，否则这些成本会因自定义CSS而显着上升。

Answer 2

如果您对HintTable使用本地JSONModel且IS_ENABLED属性位于模型的根级别，则必须使用斜杠"HintTable>/IS_ENABLED"来访问它。试试吧。
我不确定你是否可以绑定类属性。没试过。

Answer 3

使用现有样式类

current accepted solution仅在样式类可以自定义的情况下适用。但是，UI5还支持可以直接使用的predefined CSS classes。以下方法或多或少是一个把戏。

<FlexBox renderType="Bare">
  <Input>
    <layoutData>
      <FlexItemData styleClass="{= ${property} ? 'sapUiTinyMargin' : 'sapUiLargeMargin'}"/>
    </layoutData>
  </Input>
</FlexBox>

只有少数模块直接支持将CSS类作为属性绑定（例如styleClass）。 sap.m.FlexItemData是其中之一，可以应用于所有控件。

先决条件

目标控件必须位于<FlexBox>容器内。请注意应用renderType="Bare"。否则，目标控件和FlexBox容器之间将有一个额外的<div>元素，从而导致意外行为。

限制

诸如sapThemeHighlight-asBackgroundColor之类的预定义背景色不起作用，因为FlexBox has it's own class定义了其子级的背景色。
由于必须包装目标控件，因此上述方法不能应用于类型为sap.ui.core.Control以外的聚合。例如：如果要将项目用作sap.m.StandardListItem中sap.m.FlexBox绑定的模板控件，则不能用<items>包装sap.m.List。列表等待类型为sap.m.ListItemBase的控件。

Answer 4

Boghyon Hoffmann的答案很棒！

但是，如果他的选择都不对您有用，那么您总是可以使用String元素的两个不同副本以及Text属性（支持表达式绑定）：

visible

提示：
如果您的模型包含以下内容，则简化表达式布尔值代替字符串：

<Text
  class="greenTextColor"
  text="{HintTable>IS_ENABLED}"
  visible="{= ${HintTable>IS_ENABLED === 'TRUE'} }"
/>
<Text
  class="redTextColor"
  text="{HintTable>IS_ENABLED}"
  visible="{= ${HintTable>IS_ENABLED !== 'TRUE'} }"
/>

和

  visible="{= ${HintTable>IS_ENABLED} }"

控件中的绑定与“类”属性

4 个答案:

注意

使用现有样式类

先决条件

限制