SapUi5 在许多行中逐行写入文本，而无需：

Question

我正在尝试在 SapUi5 中实现这样的目标：

First row
Second row
Third row
Fourth row

实际上我能做的就是：

First Row:
Second row:
Third row:
Fourth row:

当我使用时：

<f:FormElement label="First Row"/>
<f:FormElement label="Second row"/>
<f:FormElement label="Third row"/>
<f:FormElement label="Fourth row"/>

有机会移除:吗？我应该使用标签以外的东西吗？

Answer 1

选项 1：

您可以使用 sap.ui.layout.VerticalLayout。至于实际元素，Label 通常更多地用作另一个元素的标题，例如表单字段或 table 列。所以对于一般文本，你想使用 sap.m.Text.

示例（忽略 XMLview 创建的样板）：

sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
    XMLView.create({
        definition: $('#myView').html()
    }).then(function(oView) {
        oView.placeAt('content');
    });
});

<html>

  <head>
    <meta charset="utf-8">
    <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs='sap.m,sap.ui.layout'></script>
    <script id="myView" type="sapui5/xmlview">
      <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout">
        
        <Panel headerText="My Panel">
          <l:VerticalLayout>
            <Text text="First row" />
            <Text text="Second row" />
            <Text text="Third row" />
            <Text text="Fourth row" />
          </l:VerticalLayout>
        </Panel>

      </mvc:View>
    </script>
  </head>

  <body class='sapUiBody'><div id='content'></div></body>

</html>

选项 2：

将文本放在适当的 Text 中而不是标签中，例如：

<f:FormElement><Text text="First row" /></f:FormElement>

选项 3：

用 CSS 隐藏冒号，但在这种情况下，您应该更喜欢其他选项，因为标签并不意味着只显示一些独立的文本。

Answer 2

使用CSS

.sapUiForm.sapUiFormLblColon .sapUiFormElementLbl>.sapMLabel {
   content: "" !important;
}

如果您不想覆盖所有表单的默认 CSS，您可以将自定义 class 赋予 form（如 testForm），这样您可以使用 CSS 仅覆盖特定表单。

.testForm.sapUiForm.sapUiFormLblColon .sapUiFormElementLbl>.sapMLabel {
   content: "" !important;
}

SapUi5 在许多行中逐行写入文本，而无需：

SapUi5 write text in many rows one under another without :

sapui5