在控件中与“类”绑定属性 [英] Binding in Control with "class" Attribute

问题描述

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

I want to handle the colors of the values in Text control (sap.m). If the value is "TRUE", the color is green. Otherwise it will be red if the value is "FALSE".

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

但它似乎没有用。我的意思是，类无法接收 greenTextColor 或 redTextColor 。

But it doesn't seem to be working. I mean, the class cannot receive the "greenTextColor" nor "redTextColor".

我做错了吗？

推荐答案

UI5 不支持绑定类在XML视图中直接 ，因为它不是 ManagedObject 的有效属性。不过，可以通过添加自定义数据来解决：

UI5 doesn't support binding for class in XML view directly as it's not a valid property of ManagedObject. Nevertheless, there is a workaround by adding custom data:

1. 添加具有属性 writeToDom .core.CustomData / methods / setWriteToDom rel = nofollow noreferrer> api 移至您的控件。在此处使用表达式绑定：

1. Add CustomData with the property writeToDom^api to your control. Use your expression binding there:

<Text xmlns="sap.m" class="myText" text="...">
  <customData>
    <core:CustomData xmlns:core="sap.ui.core"
      key="green"
      value="foo"
      writeToDom="{= expression}"
    />
  </customData>
</Text>

根据表达式绑定的结果，数据绿色将添加到控件的HTML元素中。然后，浏览器可以操纵与 属性选择器 。

Depending on the outcome of your expression binding, data-green will be added to the control's HTML element. The browser can then manipulate the color corresponding to the attribute selector.

因此，您的CSS应该包含选择器：

Your CSS should thus include the selector accordingly:

.myApp .sapMText.myText[data-green] {
  /* ... */
}

这是一个示例： https：/ /embed.plnkr.co/LAv1qfsUjX0Anu7S/

当然，您还可以将所需的任何内容绑定到值 CustomData 的c $ c>属性，以便对更精细的CSS选择器做出反应。要了解有关如何在DOM中利用自定义数据的更多信息，请查看文档主题 编写数据HTML DOM作为DATA- *属性 。

Of course, you can also bind anything you want to the value property of the CustomData in order to react on more granular CSS selectors. To learn more about how to leverage custom data in DOM, check out the documentation topic Writing Data to the HTML DOM as DATA-* Attribute.

• < a href = https://ui5.sap.com/#/topic/723f4b2334e344c08269159797f6f796 rel = nofollow noreferrer> SAP建议避免使用自定义CSS类指定颜色。
  
  

• SAP recommends to avoid specifying colors with custom CSS classes.

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

Fiori apps should not override styles. [...] Do not specify colors in custom CSS but use the standard theme-dependent classes instead.

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

• 带有语义颜色的文本： sap.m. ObjectStatus ，。 .ObjectNumber


• 带有自定义格式： sap.m。 FormattedText 。


• There are alternatives when it comes to styling sap.m.Text:
  • Text with semantic colors: sap.m.ObjectStatus, ..ObjectNumber
  • Text with custom formats: sap.m.FormattedText.

  通常，添加自定义的重要性应始终向涉众询问CSS样式并对其进行双重检查，这不仅是为了确保Fiori应用之间的UI一致性，而且还应减少维护成本。 ost和TCO会因自定义CSS而显着上升。

  Generally, the importance of adding custom CSS styles should be always questioned and double-checked with the stakeholders, not only for UI consistency across Fiori apps but also to reduce the maintenance costs and TCO that would otherwise rise significantly with custom CSS.

  这篇关于在控件中与“类”绑定属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！