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通常更多地用作其他元素的标题，例如表单字段或表格列。因此，对于常规文本，您想使用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隐藏冒号，但是在这种情况下，您应该选择其他选项，因为label并不意味着只显示一些独立的文本。

Answer 2

使用CSS

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

如果您不想覆盖所有表单的默认CSS，则可以将自定义class赋予form（例如testForm），以便可以使用CSS只能覆盖特定形式。

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

SapUi5在许多行中一个接一个地写文本，而没有：

2 个答案: