如何在UI5 XML视图中向TimelineItem控件的text属性添加换行符？

时间：2017-11-07 00:27:12

标签： javascript xml unicode controller sapui5

转义字符'\n'和Unicode字符\u000a仅适用于JavaScript。但是，我正在尝试在XML视图中添加换行符，如下所示。但是不起作用。

<u:TimelineItem text="First Line\n SecondLine" />

注意 \n也可以按照XML Text控件的预期工作。

<Text text="First Line\n SecondLine" />

2 个答案:

答案 0 :(得分：2)

文本控件中的新行可以添加以下字符：

  • 在 XML 视图或 XML 片段中：

    • 换行：&#10; 或 &#x0A;。
    • 推荐：* 结合回车：&#13;&#10; 或 &#x0D;&#x0A;。

  • 在 JS 或 i18n.properties 文件中：

    • 换行：\n 或 \u000a。

    • 推荐：* 结合回车：\r\n 或 \u000d\u000a。

    • 或者，考虑使用 template literals 而不是手动连接上述字符（即简单地将 "..." 替换为 `...`）。

  • 某些 UI5 控件允许开箱即用的 HTML tag <br>（在 XML 中：&lt;br>）：

* 参见 Issues with different newline formats。对于大多数 Internet 协议，建议使用与回车符的组合。


这是一个带有 sap.suite.ui.commons.TimelineItem* 和 sap.m.Text 的 UI5 演示：

sap.ui.require([
  "sap/ui/core/Core"
], Core => Core.attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/m/Text",
], async (XMLView, Text) => {
  "use strict";
  
  const view = await XMLView.create({
    definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
      <App xmlns="sap.m" autoFocus="false">
        <Page showHeader="false" class="sapUiResponsiveContentPadding">
          <commons:TimelineItem xmlns:commons="sap.suite.ui.commons"
            text="Multiline supported&#10;in Timeline items (XML)"
          />
          <HBox id="myBox" justifyContent="SpaceAround">
            <Text
              text="This&#10;is&#x0A;a&#13;&#10;text (created in XML view)!"
              renderWhitespace="true"
            />
          </HBox>
        </Page>
      </App>
    </mvc:View>`,
  });
  
  const textCreatedInJS = new Text({
    renderWhitespace: true,
    text: "And this\nis\u000aanother\r\ntext (created in JS)!",
  });
  Core.byId(view.createId("myBox")).addItem(textCreatedInJS);
  view.placeAt("content");
})));
<script id="sap-ui-bootstrap"
  src="https://ui5.sap.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.suite.ui.commons"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>

* TimelineItem 在 UI5 的早期版本中存在一个阻止多行的错误。根据他们 1.44.5 的更新日志：

<块引用>

[FIX] sap.suite.ui.commons.Timeline：改进了多行文本的渲染

如果使用控件 sap.m.Text，请记住启用属性 renderWhitespace 和 wrapping，以便在 DOM 中呈现新行。

对于 UI5 控件开发人员

在 DOM 中渲染文本可以通过 RenderManager 中的 API .text(/*...*/) 实现。但是，即使文本包含上述换行符，该 API 也不一定应用换行符。在这种情况下，white-space 属性 pre-line 可以应用于控件的 CSS 样式：

.myControlWithText {
  /* ...; */
  white-space: pre-line; /* Allows line break characters to be applied */
}

答案 1 :(得分：0)

  

您可以使用embeddedControl聚合来使用文本控件   在TimelineItem里面

<u:TimelineItem>
      <u:embeddedControl><Text text="First Line\n SecondLine"></Text></u:embeddedControl>
</u:TimelineItem>
相关问题
最新问题